春三月

马黑黑 · 发表于 2023-3-8 18:14

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-3-8 18:23 编辑

马黑黑 · 发表于 2023-3-8 18:16

帖子代码

<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 18:16

本帖最后由马黑黑于 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），无需做过多设置。