如何使用 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：live demo

很遗憾，这没有按预期工作。

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

Answer 1

检查以下内容： https://jsfiddle.net/psbqn9d0/1/

它不会创建您在图片中显示的视图，但会每 5 秒更改一次缩略图。我还添加了一些日志记录来帮助您理解代码。

现在，如果你想实现如图所示，那么这是可能的：-

1. 如果您已完全加载视频。然后创建所有缩略图并将它们添加到容器中。
2. 您在服务器上创建缩略图并将它们发送给用户（就像大多数视频网站所做的那样（这样我们就可以在不加载的情况下看到视频中的内容！））
3. 或者您可以创建所有缩略图而不加载整个视频。我不确定这是否是最好的方法，但这肯定会奏效。

您应该使用相同的源链接创建另一个 video 标记，并使用 css 隐藏它。然后，您将创建一个 javascript 函数，该函数将以编程方式每 5 秒查找一次，并继续保存缩略图并将它们添加到您的容器中。这样，您的缩略图将为整个视频生成，而无需加载整个视频。

希望能解开你的疑惑！