春三月
本帖最后由 马黑黑 于 2023-3-8 18:23 编辑 <br /><br /><style>#vid { position: absolute; display: none; }
#canv { margin: -80px 0 0 calc(50% - 593px); position: relative; display: block; box-shadow: 4px 4px 12px gray; cursor: pointer; z-index: 1; }
</style>
<video id="vid" loop autoplay src="http://www.kumeiwp.com/sub/filestores/2022/10/12/bc1f6885781a78e63017d5100f322470.mp4"></video>
<canvas width="1024" height="576" id="canv"></canvas>
<script>
(function(){
let ctx = canv.getContext('2d');
let loop = () => {
ctx.drawImage(vid, 0, 0, canv.width, canv.height);
if(!vid.paused) {
requestAnimationFrame(loop);
return;
}
}
vid.addEventListener('play', loop, false);
canv.addEventListener('click', () => vid.paused ? vid.play() : vid.pause());
})();
</script>
帖子代码
<style>
#vid { position: absolute; display: none; }
#canv { margin: -80px 0 0 calc(50% - 593px); position: relative; display: block; box-shadow: 4px 4px 12px gray; cursor: pointer; }
</style>
<video id="vid" loop autoplay src="http://www.kumeiwp.com/sub/filestores/2022/10/12/bc1f6885781a78e63017d5100f322470.mp4"></video>
<canvas width="1024" height="576" id="canv"></canvas>
<script>
let ctx = canv.getContext('2d');
let loop = () => {
ctx.drawImage(vid, 0, 0, canv.width, canv.height);
if(!vid.paused) {
requestAnimationFrame(loop);
return;
}
}
vid.addEventListener('play', loop, false);
canv.addEventListener('click', () => vid.paused ? vid.play() : vid.pause());
</script>
本帖最后由 马黑黑 于 2023-3-8 19:40 编辑
canvas画布可以复刻视频。如果我们仅仅抓取视频的一个画面，那太简单了（假设变量 cxt 是 canvas 画布的2d画笔）：
ctx.drawImage(视频元素的id, 0, 0, 宽度, 高度);
其中，drawImage 是画布的绘制图像的方法，它需要的参数有图像（视频元素id）、开始的xy坐标（0,0）、呈现出来的宽高（宽度,高度)。
问题是，我们要抓取的是视频流。所以我们需要设计一个函数，让视频流循环绘制在画布之上。为此，我们先准备好 html 代码：
<video id="vid" loop autoplay src="视频地址"></video>
<canvas width="1024" height="576" id="canv"></canvas>
视频和画布元素，都有各自的 id，这便于JS对其直接操作。下面的JS代码，我会在后面逐一解释：
<script>
let ctx = canv.getContext('2d');
let loop = () => {
ctx.drawImage(vid, 0, 0, canv.width, canv.height);
if(!vid.paused) {
requestAnimationFrame(loop);
return;
}
};
vid.addEventListener('play', loop, false);
canv.addEventListener('click', () => vid.paused ? vid.play() : vid.pause());
</script>03行：声明画笔，变量为 ctx；
05 - 11行：自定义函数 loop，将视频元素的画面绘制到画布中。其中，06行是绘制语句，将 id 为 vid 的视频元素画面从 {0，0} 处开始绘制，绘制的尺寸是画布宽高尺寸，这意味着，画面是从视频的左上角{0，0}处开始绘制，绘制的画面尺寸正好是画布的尺寸。07 - 10行：如果视频不是停止状态，则运行请求关键帧动画的API（requestAnimationFrame定时器），该AIP递归调用其所在的 loop 函数；
13行：监听视频的播放（play）事件，若视频处于play状态，则运行 loop 函数；
15行：监听画布单击（click）事件，驱动视频在播放/暂停间的切换。
此外，在CSS代码里，我们还设计了基于 video 和 canvas 元素的相关属性，请参考帖子源码。至于视频的CSS和html设置，我们没有做过多的工作，因为它不在Dom中显示出来（display: none），无需做过多设置。
占一下换了图，出了歌。跟之前所有的贴子都不同
{:4_170:}这个作业不会抄。走了 雨中悄然 发表于 2023-3-8 18:38
这个作业不会抄。走了
找个视频就行 雨中悄然 发表于 2023-3-8 18:30
占一下换了图，出了歌。跟之前所有的贴子都不同
这个是视频转到画布中来的 呀，以为黑黑做了个视频，原来是找的{:4_204:} 红影 发表于 2023-3-8 19:09
呀，以为黑黑做了个视频，原来是找的
俺一向不做视频，因为俺长得太帅了 用画布控制视频，黑黑又带来新玩法{:4_199:} 清水出芙蓉天然去雕饰。专找美少女挖{:4_173:} 红影 发表于 2023-3-8 19:11
用画布控制视频，黑黑又带来新玩法
详情请看板凳楼 樵歌 发表于 2023-3-8 19:36
清水出芙蓉天然去雕饰。专找美少女挖
女王节多挖挖，有惊喜{:5_106:} 有意思的，新奇。 庶民 发表于 2023-3-8 20:04
有意思的，新奇。
视频可以这样玩{:5_106:} MP4的地址不好找啊 绿叶清舟 发表于 2023-3-8 20:52
MP4的地址不好找啊
自己存 马黑黑 发表于 2023-3-8 20:53
自己存
上哪存啊 绿叶清舟 发表于 2023-3-8 20:58
上哪存啊
酷美网盘
马黑黑 发表于 2023-3-8 19:42
女王节多挖挖，有惊喜
俺没来得及就过去了。{:4_189:}