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

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

概述

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>