js截取视频第一帧为封面

PC端

如果只有pc端的需求，那么可以直接利用loadeddata方法截取视频内容

const canvas = document.createElement('canvas');
const video = document.getElementById('video');
video.setAttribute('crossOrigin', 'anonymous'); // 添加跨域标识，否则canvas转图报错
video.currentTime = 1; //  不设置会导致进度为0，截取空白内容
const { clientWidth, clientHeight } = video
canvas.width = clientWidth;
canvas.height =  clientHeight;
video.onloadeddata = (() => {
    canvas.getContext('2d').drawImage(video, 0, 0, clientWidth, clientHeight);
    const dataURL = canvas.toDataURL('image/png');
    video.setAttribute("poster", dataURL); // 设置canvas转化后的图片为封面
})

移动端

但是在移动端，loadeddata方法只有在视频播放时才会被调用。尝试以下方式，仍是无效。

1. 在加载完节点后手动调用该方法，但是拿到的仍是空白页面。
2. 添加属性autoplay为true，无效。
3. 手动调用play方法再赞同，无效。浏览器已经不支持在移动端默认播放视频了，所以强制调用只会报错。

所以，咱得借助第三方。

1. 腾讯云
   官方地址：https://cloud.tencent.com/document/product/436/73434

src = `${videoSrc}?ci-process=snapshot&time=0.01`

2. 阿里云
   官方地址：https://help.aliyun.com/document_detail/64555.html

src = `${videoSrc}?x-oss-process=video/snapshot,t_50000,f_jpg,w_800,h_600`

3. 七牛云

src = `${videoSrc}?vframe/jpg/offset/0`

如果你的视频存储在其他云平台，也可以到对应平台查看是否有方法可以直接获取