第一步
新建 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>