Question

所以我正在开发一个交互式HTML5视频播放器，目前使用popcorn.js时一切正常，但我现在正试图回去让我的播放器工作而不依赖于popcorn.js。

使用popcorn.js时，您可以使用以下代码：

popcorn.code((
    start: 0,
    end: 5,
    onStart: function( options ) {
        //put code here
    }
}}

并且当您的视频时间从0到5时，您的代码将被执行。现在，我正在尝试在视频的特定时间范围内执行某些代码块，但我似乎无法得到它工作正常，只是想知道是否有人可以看到我在哪里做错了。

while (myVideo.currentTime >= 0 && myVideo.currentTime <= 5)
{
    console.log(myVideo.currentTime);
}

这个while循环也运行得太快，导致浏览器变慢并冻结。但是，如果我尝试使用if循环而不是while循环，它（显然）只检查一次。

Answer 1

你可以检查少于while循环。

var check = setInterval(function() {
    if (myVideo.currentTime >= 5) {
        clearInterval(check);
        console.log("5 seconds reached");
    }
}, 500);

当用户暂停并重新开始或者他在时间线内跳到另一个时间时，你可以再次开始这个。

Answer 2

尝试使用以下内容，这样您的功能每秒只运行一次。

setInterval(function(){
if(myVideo.currentTime >= 0 && myVideo.currentTime <= 5){
console.log(myVideo.currentTime);
}
},1000);

祝你好运！

时间范围内的HTML5视频

2 个答案: