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方法只有在视频播放时才会被调用。尝试以下方式，仍是无效。
- 在加载完节点后手动调用该方法，但是拿到的仍是空白页面。
- 添加属性autoplay为true，无效。
- 手动调用play方法再赞同，无效。浏览器已经不支持在移动端默认播放视频了，所以强制调用只会报错。
所以，咱得借助第三方。
src = `${videoSrc}?ci-process=snapshot&time=0.01`
src = `${videoSrc}?x-oss-process=video/snapshot,t_50000,f_jpg,w_800,h_600`
- 七牛云
src = `${videoSrc}?vframe/jpg/offset/0`
如果你的视频存储在其他云平台，也可以到对应平台查看是否有方法可以直接获取
