html5 视频缩略图,应用canvas获取video的缩略图

发布视频时候，经常需要上传同时上传视频的缩略图，近日，应产品经理的的要求，需要做一个发布视频动态的功能，我第一反应就想到了H5的标签vidio和canvas，在这里记录下我完成该功能的过程：

首先，整体思路是创建一个vidio，然后创建一个canvas和一个画笔，调用画笔的drawImage方法，将vidio作为参数，就会画出该视频的缩略图。

二话不说撸代码：

function creatImg() {

const video = document.getElementById('videoPreview');

const canvas = document.createElement('canvas');

const ctx = canvas.getContext('2d');

const imgHeight = video.videoHeight;

const imgWidth = video.videoWidth;

ctx.drawImage(video, 0, 0, imgWidth, imgHeight);

const imgSrc = canvas.toDataURL('image/png');

console.log(imgSrc);

}

该方法是在上传视频发送ajax成功的回调函数中调用的，

// 上传视频

$('#video').on('change', (e) => {

const video = e.cur