您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

使用HTML5和JavaScript从视频捕获帧

使用HTML5和JavaScript从视频捕获帧

原因

问题在于(通过设置currentTime)查找视频是异步的。

您需要收听seeked事件,否则可能会冒取当前实际帧的风险,这很可能是您的旧值。

由于它是异步的,因此您也不能使用setInterval()它,因为它也是异步的,并且当寻求下一帧时,您将无法正确同步。无需使用,setInterval()因为我们将利用seeked事件来代替,这将使所有内容保持同步。

通过稍微重写代码,您可以使用该seeked事件来遍历视频以捕获正确的帧,因为此事件可确保我们实际上位于通过设置该currentTime属性所请求的帧。

// global or parent scope of handlers
var video = document.getElementById("video"); // added for clarity: this is needed
var i = 0;

video.addEventListener('loadeddata', function() {
    this.currentTime = i;
});

将此事件处理程序添加到聚会中:

video.addEventListener('seeked', function() {

    // Now video has seeked and current frames will show
    // at the time as we expect
    generateThumbnail(i);

    // when frame is captured increase, here by 5 seconds
    i += 5;

    // if we are not passed end, seek to next interval
    if (i <= this.duration) {
        // this will trigger another seeked event
        this.currentTime = i;
    }
    else {
        // Done!, next action
    }
});
javascript 2022/1/1 18:21:37 有436人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶