video 截图制作封面

发表于 | 分类于 | 热度 ℃
字数统计: 79 | 阅读时长 ≈ 1
使用canvas从video标签截取视频帧制作封面图片的方法，解决video标签无法直接绘制到canvas的跨域问题。

video 标签无法绘制到 canvas 上？ 前端该如何给 video 制作封面

截取视频封面

1
2
3
4
5
6
7
8
9
10
11
12
13
const videoEl = document.createElement('video');
const canvasEl = document.createElement('canvas');
video.width = 192;
video.height = 108;
canvas.width = 192;
canvas.height = 108;
video.autoplay = 'autoplay';
video.preload = 'auto';
video.src = 'https://xxx.org/xxx.mp4';
video.addEventListener('loadeddata', () => {
  canvas.getContext('2d').drawImage(video, 0, 0, 192, 108);
  const url = canvas.toDataURL();
});
-------------本文结束感谢您的阅读-------------
坚持原创技术分享，您的支持将鼓励我继续创作！
0%