html5 video缩略图,javascript - 如何使用HTML5和Jquery从视频中捕获缩略图（帧）？ - 堆栈内存溢出...

我有一个简单的块，我想每5秒从视频中捕获一帧，并在下面显示类似的内容。

这是我尝试过的解决方案。

这是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： 现场演示

不幸的是，这没有按预期工作。

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