|
|

楼主 |
发表于 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),无需做过多设置。
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|