时间范围内的 HTML5 视频答案

【问题标题】：HTML5 video within time frame时间范围内的 HTML5 视频
【发布时间】：2013-02-01 16:58:15
【问题描述】：

所以我正在开发一个交互式 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 循环，它（显然）只检查一次。

【问题讨论】：

标签： javascript html html5-video popcornjs

【解决方案1】：

您可以检查的次数少于while 循环的次数。

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

当用户暂停并重新开始，或者如果他跳到时间轴内的另一个时间时，您可以重新开始。

【讨论】：

对不起...我们都想出了相同的答案。在我发布我的帖子之前没有看到您的回复。
我会为视频添加一个播放检查，只在它实际播放视频时启用它，除非页面所做的只是播放视频，那么它就不那么重要了。
感谢你们两位！我对如何处理它完全一头雾水，但 setInterval 是有道理的，可以帮助它正常工作。
@nycynik 是对的。当然，这应该仅在实际播放某些内容时触发。 :)
@spooky 确实如此。一个典型的 SO 巧合。 :)

【解决方案2】：

尝试使用以下方法，以便您的函数每秒只运行一次。

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

祝你好运！

【讨论】：