需求
在做视频上传时一般会上传一张图片作为封面图，这时就可以获取视频的一些封面帧，选择一帧当作封面图；同样在页面展示的时候视频没有封面图，也可以通过这种方法去截取一帧图，提高用户体验。
思路
1、获取视频文件
2、跳转到对应帧
3、使用canvas把对应帧画出来
4、最后返回对应的数据
获取视频文件
-
页面文件框
<input type="file" accept="video/*" ref="vdoFileRef" @change="changeFile" /> -
获取视频文件
async changeFile(e) { let file = e.target.files[0]; let vdo = document.createElement('video'); vdo.src = URL.createObjectURL(file); }
关键帧操作
封装一个函数用来操作关键帧
captureFrame(vdo, time = 0) {
return new Promise((resolve, reject) => {
vdo.currentTime = time;
vdo.muted = true;
vdo.autoplay = true;
vdo.oncanplay = () => {
};
});
},
这个函数需要传入视频文件和视频秒数，视频跳转到对应秒数，静音自动播放，这样在任何浏览器都可以支持，由于视频没有添加到页面所以跳转到对应秒数后不会自动播放，最后监听事件，视频可以播放后执行后续操作。oncanplay是异步操作，使用Promise包裹一层返回。
绘制关键帧
drawVideo(vdo) {
return new Promise((resolve, reject) => {
let cvs = document.createElement('canvas');
let ctx = cvs.getContext('2d');
cvs.width = vdo.videoWidth;
cvs.height = vdo.videoHeight;
ctx.drawImage(vdo, 0, 0, cvs.width, cvs.height);
cvs.toBlob((blob) => {
resolve({
blob,
url: URL.createObjectURL(blob),
});
});
});
},
canvas是可以画视频的，所以把视频传入，根据视频大小画出当前帧，最后使用toBlob()返回想要的数据，这里返回两个数据blob可用于封面上传，url可用于预览，由于toBlob是异步操作，使用Promise包裹一层返回。
使用
在oncanplay里调用绘制关键帧的函数
vdo.oncanplay = async () => {
let frame = await this.drawVideo(vdo);
resolve(frame);
};
最后就是在选择文件后根据要求调用函数生成对应的封面图
async changeFile(e) {
let file = e.target.files[0];
let vdo = document.createElement('video');
vdo.src = URL.createObjectURL(file);
// 间隔1秒生成10张封面图
for (let i = 0; i < 10; i++) {
let frame = await this.captureFrame(vdo, i * 1);
this.list.push(frame);
}
}
