如何使用HTML5和Jquery從視頻中捕獲縮略圖（幀）？

Question

我有一個簡單的塊，我想每5秒從視頻中捕獲一幀，並在下面顯示類似的內容。

這是我嘗試過的解決方案。

<video id="video" controls="controls">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4">
    </source>
</video>

<div id="time-ruler"></div>
<canvas id="canvas" width="300" height="300"></canvas>

<div id="thumbnailContainer"></div>

這是javascript

video.addEventListener('loadeddata', function() {
    var duration = video.duration;
    var i = 0;

    var interval = setInterval(function() {
        video.currentTime = i;
        generateThumbnail(i);
        i = i+5;
        if (i > duration) clearInterval(interval);
    }, 300);
});

function generateThumbnail(i) {
    //generate thumbnail URL data
    var context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, 220, 150);
    var dataURL = canvas.toDataURL();

    //create img
    var img = document.createElement('img');
    img.setAttribute('src', dataURL);

    //append img in container div
    document.getElementById('thumbnailContainer').appendChild(img);
}

這是jsfiddle： 現場演示

不幸的是，這沒有按預期工作。

我需要做什么才能得到我想要的東西？

Answer 1

檢查以下內容： https : //jsfiddle.net/psbqn9d0/1/

它不會創建您在圖片中顯示的視圖，但是會每5秒更改一次縮略圖。 我還添加了一些日志記錄來幫助您理解代碼。

現在，如果您想實現圖中所示的功能，則可以：

1. 如果您已完全加載了視頻。 然后創建所有縮略圖並將其添加到容器中。
2. 您可以在服務器上創建縮略圖並將其發送給用戶（就像大多數視頻網站所做的一樣（這樣我們就可以看到視頻中的內容而無需加載！））
3. 或者，您可以創建所有縮略圖，而無需加載整個視頻。 我不確定這是否是最好的方法，但是肯定可以。

您應該使用相同的源鏈接創建另一個video標簽，並使用CSS隱藏它。 然后，您將創建一個javascript函數，該函數將以編程方式每5秒搜索一次，並繼續保存縮略圖並將其添加到您的容器中。 這樣，您將為整個視頻生成縮略圖，而無需加載整個視頻。

希望它能澄清您的疑問！