制作视频一帧封面(H5处理)
实现原理:
1:创建video获取视频(上传或者网络视频)
var video = document.createElement("VIDEO");
2:指定video截取当前帧数
video.currentTime = 5; //必须设置视频当前时长,要不然会黑屏
3:创建canvas画布
var canvas = document.createElement('canvas');
4:视频加载完毕,截取视频帧数,绘画视频封面
// 图片绘制
video.onloadeddata = (() => {
// 设置画布的宽高
canvas.width = video.clientWidth;
canvas.height = video.clientHeight;
window.getComputedStyle(that.$refs.videoFilter).width,
window.getComputedStyle(that.$refs.videoFilter).height);
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width,canvas.height);
var dataURL = canvas.toDataURL('image/jpeg');
// console.log(dataURL,"-----")
})
完整案例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">&l