如何使用 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 秒更改一次缩略图。我还添加了一些日志记录来帮助您理解代码。

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

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

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

希望能解开你的疑惑！

如何使用 HTML5 和 Jquery 从视频中捕获缩略图（帧）？

How to capture thumbnails (frame) from video with HTML5 and Jquery?

html

javascript

jquery

html5-video

html5-canvas