html5显示视频帧,使用HTML5和JavaScript从视频中捕获帧

我想每隔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 = thecanvas.getContext('2d');

context.drawImage(video, 0, 0, 220, 150);

var dataURL = thecanvas.toDataURL();

//create img

var img = document.createElement('img');

img.setAttribute('src', dataURL);

//append img in container div

document.getElementById('thumbnailContainer').appendChild(img);

}

我遇到的问题是生成的前两个图像是相同的，并且不生成持续时间为5秒的图像。我发现缩略图是在特定时间的视频帧显示在< video>标记之前生成的。

例如，当video.currentTime = 5时，生成帧0的图像。然后视频帧跳到5秒。因此，当video.currentTime = 10时，生成第5帧的图像。