前端截取视频第一帧作为封面

概述1.做项目的时候突然想截取视频第一帧，作为视频的封面，然后搜了很多博客都发现得到空白的图片，最后得到了解决。2.方法：通过创建canvas标签，利用其drawImage() 方法在画布上绘制该视频，然后运用toDataURL方法转换canvas上的图片为base64格式，并将base64格式的图片作为video标签的poster属性。3.浏览器：chrome代码关键video.currentT

番茄炒蛋加鸡腿

6640人浏览 · 2022-01-30 13:15:37

番茄炒蛋加鸡腿 · 2022-01-30 13:15:37 发布

概述

1.做项目的时候突然想截取视频第一帧，作为视频的封面，然后搜了很多博客都发现得到空白的图片，最后得到了解决。

2.方法：通过创建canvas标签，利用其drawImage() 方法在画布上绘制该视频，然后运用toDataURL方法转换canvas上的图片为base64格式，并将base64格式的图片作为video标签的poster属性。

3.浏览器：chrome

代码关键

video.currentTime = 1

currentTime 属性设置或返回视频播放的当前位置（以秒计）。当设置该属性时，播放会跳跃到指定的位置。一定要设置该属性，不然会得到空白的图片。

知识点

video.onloadeddata

onloadeddata 事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频（audio/video）的下一帧时触发。在当前帧的数据可用时执行相应 JavaScript代码。

canvas.toDataURL

是返回一个包含图片展示的数据URL。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。

video.setAttribute(‘crossOrigin’, ‘anonymous’)

canvas无法对跨域的图片进行操作，这样解决了跨域问题。

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>capture screen</title>
		</head>
	<body>
		<video id="video" controls="controls">
			<source src="./0130_1.mp4">
		</video>
		<div id="output"></div>
		<script type="text/javascript">
		(function(){
			var video, output;
			output = document.getElementById("output");
			var canvas = document.createElement('canvas')
			var img = document.createElement("img");
			video = document.getElementById('video')
			video.setAttribute('crossOrigin', 'anonymous')
			video.currentTime = 1 
			canvas.width = video.clientWidth
			canvas.height = video.clientHeight
			video.onloadeddata = (() => {
			    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
			    var dataURL = canvas.toDataURL('image/png')
			    img.src = dataURL;
			    img.width = 400;
			    img.height = 300;
			    output.appendChild(img);
			  })
			 
			})();
		</script>
	</body>
</html>