<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>视频抠绿幕</title>
<script src="./green-wipe.js"></script>
<style>
*{margin:0;padding:0;box-sizing:border-box}
.video-box{width:960px;height:540px;position:relative;background-color:#039;margin:0 auto}
</style>
</head>
<body >
<div class="video-box">
<video
id="myVideo"
src="./green.mp4"
autoplay
playsinline
style="visibility: visible;width: 100%;height: 100%;object-fit: cover;"
loop
/>
</div>
<div style="text-align: center;margin-top: 20px;">
<button id="playBtn">播放/暂停</button>
</div>
<script>
const videoEl = document.getElementById('myVideo');
videoEl.addEventListener('playing', function () {
videoEl.style.visibility = 'hidden'
window.GreenWipe.startWipe(videoEl)
})
document.getElementById('playBtn').addEventListener('click', function () {
if (videoEl.paused) {
videoEl.play();
} else {
videoEl.pause();
}
})
</script>
</body>
</html>
green-wipe.js视频实时抠绿幕.zip （3个子文件） 
green.mp4 2.12MB
index.html 1KB
green-wipe.js 24KB资源评论
qq_29313727
- 粉丝: 3
最新资源
- 基于xml的web查询技术研究本科毕设论文.doc
- PLC授课教案(正页).doc
- 2017年全国分析大赛软件服务外包企业命题大数据分析02基于市民卡和人口库的大数据分析及应用.doc
- 智慧城市推广策略方案(综合版).pptx
- 【精品课件】教育科学出版社高中信息技术必修：信息技术基础6.2.2网络信息发布.pptx
- 高端互联网产品总结PPT新版.pptx
- 计算机算法设计与分析算法概述.pptx
- 通信企业合规自查报告范文.docx
- 电子商务产业园合作协议样本.doc
- c语言课程设计--职工信息管理系统.doc
- 网站合作代理协议标准范本.doc
- 再就业便民连锁配送中心网络建设工程项目可行性论证报告.doc
- 网络公司优秀实习心得体会范文.doc
- 移动互联网读后感.doc
- oracle数据库系统管理员培训手册.doc
- 基于AI大数据的智慧办公综合解决方案【完整版】.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
