如何使用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秒搜索一次，并继续保存缩略图并将其添加到您的容器中。 这样，您将为整个视频生成缩略图，而无需加载整个视频。

希望它能澄清您的疑问！