在現(xiàn)今的互聯(lián)網(wǎng)世界中，視頻播放已經(jīng)變得如此普遍，然而在視頻播放中若想獲取到某一關(guān)鍵幀或是需要提取視頻某一時(shí)間點(diǎn)的靜態(tài)圖片，這時(shí)候用的就是截圖，本文將介紹使用javascript實(shí)現(xiàn)視頻截圖的方案。

要用javascript實(shí)現(xiàn)視頻截圖，需要借助canvas API。我們先來(lái)看一個(gè)例子：

//獲取video元素
const video = document.querySelector('video');
//創(chuàng)建canvas元素
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
//在canvas上繪制視頻當(dāng)前幀
const ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
//將canvas轉(zhuǎn)為圖片
const img = new Image();
img.src = canvas.toDataURL();
document.body.appendChild(img);

以上的代碼，在拿到視頻元素后，創(chuàng)建了一個(gè)與視頻大小相同的canvas元素，然后使用canvas API繪制了視頻當(dāng)前的一幀，并將其轉(zhuǎn)換為圖片展示在頁(yè)面上。如果要實(shí)現(xiàn)視頻截圖功能，只需要根據(jù)需求獲取對(duì)應(yīng)時(shí)間點(diǎn)上的一幀即可。

關(guān)于如何獲取視頻指定時(shí)間點(diǎn)對(duì)應(yīng)的幀，我們可以通過(guò)修改video元素的currentTime屬性來(lái)尋找到指定的幀。如下所示：

video.currentTime = 2; //獲取第2秒的幀
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

另外，如果要獲取視頻中的關(guān)鍵幀，可以利用視頻的關(guān)鍵幀索引表（Key Frame Index）。例如，如果我們要獲取第10秒的關(guān)鍵幀，可以通過(guò)如下方式實(shí)現(xiàn)：

//獲取視頻的關(guān)鍵幀索引表
const keyFrames = video.webkitVideoDecodedByteCount;
//獲取第10秒關(guān)鍵幀的索引
let index = 0;
let time = 0;
while(time < 10 && index < keyFrames.length){
time += video.duration / keyFrames.length;
index++;
}
//定位到關(guān)鍵幀位置
video.currentTime = index * video.duration / keyFrames.length;
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

以上的代碼，獲取到視頻的關(guān)鍵幀索引表，然后循環(huán)查找對(duì)應(yīng)時(shí)間點(diǎn)的關(guān)鍵幀，最后設(shè)置video.currentTime屬性到關(guān)鍵幀的位置。接下來(lái)就可以利用canvas API獲取到相應(yīng)的幀了。

總結(jié)：使用javascript實(shí)現(xiàn)視頻截圖功能，我們只需要借助canvas API，在canvas上繪制視頻的對(duì)應(yīng)幀，再轉(zhuǎn)化為圖片即可。對(duì)于要獲取指定時(shí)間點(diǎn)或者關(guān)鍵幀對(duì)應(yīng)的幀，只需設(shè)置對(duì)應(yīng)的video.currentTime屬性即可。