前端截取视频第一帧作为封面
概述
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>
下一篇：
搭建自己的存储服务器NAS