第一步
新建 video ，放置需要截取的视频文件
<video id="video" controls="controls" src="video/1.mp4"></video>
并且在 JS 中获取video标签,并监听它的 loadeddata 事件：
loadeddata : 当媒体当前播放位置的帧完成加载时触发该事件 —— 通常是第一帧。
video = document.getElementById("video");
video.addEventListener('loadeddata', function() {...});
第二步
在监听 loadeddata 中 指定事件触发时执行的函数。我们的实现截取第一帧就在这里面编写：
- 定义创建一个 canvas 标签;
- 指定 canvas 标签的宽高;
- 调用canvas元素中的 getContext() 方法（返回一个用于在画布上绘图的环境）
let canvas = document.createElement("canvas");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
let ctx = canvas.getContext('2d');
此时我们已经拥有了一个有着固定宽高并且有一个用于在画布上绘图的环境。
之后调用ctx （画布的2d绘图的环境）中的 drawImage 方法来在画布上定位图像，并规定图像的宽度和高度：
ctx.drawImage(img,x,y,width,height)
- img 规定要使用的图像、画布或视频。
- x 在画布上放置图像的 x 坐标位置。
- y 在画布上放置图像的 y 坐标位置。
- width 可选。要使用的图像的宽度。（伸展或缩小图像）
- height 可选。要使用的图像的高度。（伸展或缩小图像）
此时此刻我们的canvas中已经有图像了，若想看效果，将 canvas 插入到 body 即可。
document.body.appendChild(canvas)
但是我们要的是插入到 img 标签中，所以还需要调用一个api !
第三步
- 定义创建一个img
- 调用 canvas 中的 toDataURL 方法:
HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。
其语法格式如下：
canvas.toDataURL(type, encoderOptions);
- type图片格式，默认为 image/png
- encoderOptions 图片质量；在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。
let img = document.createElement("img")
img.src = canvas.toDataURL("image/png")
document.body.appendChild(img)
完整代码
我们加一个“button”，使点击时再去截取：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>截取视频第一帧作为封面</title>
</head>
<body>
<video id="video" controls="controls" src="video/1.mp4" width="360" height="640">
<img id="load" src="video/loading.gif" style="display:none;" /><!-- 利用父相子绝 -->
</video>
<input id="button" type="submit" value="截取吧" />
<script>
(function(){
let button=document.querySelector('#button');
let video=document.querySelector('#video');
let mxcimg=document.querySelector('#load');
let captureImage=function(){
let canvas=document.createElement('canvas');
canvas.width=360;
canvas.height=640;
let ctx=canvas.getContext('2d');
ctx.drawImage(video,0,0,360,640);
//此时我们已经有图片了(表现为canvas标签)，但是我们需要插入到img标签中！
let img=document.createElement('img');
// canvas.toDataURL(type, encoderOptions); -> 图片格式，图片质量
img.src=canvas.toDataURL('image/png');
document.body.appendChild(img);
mxcimg.style.display="none";
};
button.addEventListener('click',function(){
mxcimg.style.display="block";
video.addEventListener('loadeddata',captureImage);
});
})();
</script>
</body>
</html>
