HTML5视频，视频内无缝循环

Question

我正在编写一个交互式视频（一种游戏），用户在侧面板上进行操作，并在视频中执行操作。

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

所以在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);
    }
});

Answer 1

进行无缝循环的最简单方法是使用全长视频并等待“已结束”事件返回到开头。这往往非常顺利，所以如果你能做到这一点，那就是最好的方式。

拍摄视频的子部分并将其循环很困难，因为浏览器不会每毫秒触发“timeupdate”事件，这样做效率非常低。相反，它们每15（Chrome / Safari）或250（Firefox）毫秒触发timeupdate，这就是你的误差范围。您可以创建一个较小间隔的自己的计时器（setInterval）并手动检查时间，但这可能会给浏览器带来沉重负担。