js 操作视频帧

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

function getVideoBase64(url) {
	return new Promise(function(resolve, reject) {
		let dataURL = '';
		let 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 = 7  //视频时长，一定要设置，不然大概率白屏
		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
			var img = document.createElement("img");
			img.src = dataURL
			video.setAttribute('poster', dataURL);
			resolve(dataURL);
		});
	})
}

getVideoBase64(src).then(res=>{
	img.src = res  //你懂的（@——_——@）
})