js 操作视频帧

MDN https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Manipulating_video_using_canvas

实现原理：通过canvas将正在播放到的一定位置的video图像绘制到canvas上面，之后通过canva转码成base64

function getBase64ImgCodeFromVideo(url,width=400,height=240) {
	/// 返回一个 Promise
	return new Promise(function(resolve, reject) {
		// base64 的图片编码
		let dataURL = '';
		const video = document.createElement("video");
		// 匿名
		video.setAttribute('crossorigin', 'anonymous'); //处理跨域
		video.setAttribute('src', url);
		// video.setAttribute('width', 400);
		// video.setAttribute('height', 240);
		video.setAttribute('controls', 'controls');
		video.currentTime = 1  //视频时长，对应上面的实现原理，如果没有设置时间的话，现实的时候就是刚开始视频的一下子，就是白屏!!!
		video.addEventListener('loadeddata', function(e) {
			let canvas = document.createElement("canvas");
			// width = video.width, //canvas的尺寸和图片一样
			// height = video.height;
			canvas.width = width;
			canvas.height = height;
			canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
			dataURL = canvas.toDataURL('image/png'); //转换为base64
			// 设置视频的封面
			// video.setAttribute('poster', dataURL);
			resolve(dataURL);
		});
	})
}