2

我正在编写一个交互式视频(一种游戏),用户在侧面板上进行操作并在视频中发生操作。

对于一部分,视频正在等待面板上的用户操作,因此它必须循环直到用户启动操作。

所以在 15 秒时,只要用户没有做出动作,我就会回到 11 秒,视频被设计成一个完美的循环。

我的循环正在工作,但问题是它不是无缝的。在 15 秒时,它会停止大约一秒,然后在 11 秒时重新开始。有没有办法让它无缝工作?

我正在使用 VideoJS。这是我的代码:

var video_decor = _V_("video_decor");
video_decor.addEvent("timeupdate", function(){
    var whereYouAt = video_decor.currentTime();
    console.log(whereYouAt);
    if(whereYouAt > 15){
        video_decor.currentTime(11);
    }
});
4

1 回答 1

3

进行无缝循环的最简单方法是使用完整长度的视频并等待“结束”事件回到开头。这往往是相当顺利的,所以如果你能做到这一点,那就最好了。

取一段视频并循环播放是很困难的,因为浏览器不会每毫秒触发 'timeupdate' 事件,这样做效率非常低。相反,它们每 15 (Chrome/Safari) 或 250 (Firefox) 毫秒触发一次 timeupdate,因此这是您的误差范围。您可能会创建自己的计时器 (setInterval) 以设置更小的间隔并手动检查时间,但这可能会给浏览器带来沉重的负担。

于 2012-08-02T18:21:43.243 回答