前端截取视频第一帧作为封面-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端截取视频第一帧作为封面。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

概述

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无法对跨域的图片进行操作，这样解决了跨域问题。文章来源地址https://www.toymoban.com/news/detail-422136.html

完整代码

<!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>