使用HTML5和JavaScript从视频中捕获帧

7 浏览
0 Comments

使用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) {     
    //生成缩略图URL数据
    var context = thecanvas.getContext('2d');
    context.drawImage(video, 0, 0, 220, 150);
    var dataURL = thecanvas.toDataURL();
    //创建图像
    var img = document.createElement('img');
    img.setAttribute('src', dataURL);
    //将图像添加到容器div中
    document.getElementById('thumbnailContainer').appendChild(img);
}

我遇到的问题是生成的前两张图片相同，并且未生成持续时间减5秒的图像。我发现缩略图是在标签中显示特定时间的视频帧之前生成的。

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

0