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）以獲得較小的時間間隔，並手動檢查時間，但這會給瀏覽器帶來沉重的負擔。