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）以获得较小的时间间隔，并手动检查时间，但这会给浏览器带来沉重的负担。