無縫的HTML5視頻循環

我已經搜索了很多，找到了解決方案，但沒有成功。我創建了一個4秒鐘的視頻剪輯，可以在編輯器中無縫循環播放。但是，當剪輯通過Safari，Chrome或Firefox在頁面中運行時，從尾部到頭部的播放過程中會有小但明顯的暫停。無縫的HTML5視頻循環

我已經嘗試使用循環和預加載屬性一起和獨立。

我也曾嘗試以下的javascript：

loopVid.play(); 
loopVid.addEventListener("timeupdate", function() { 
    if (loopVid.currentTime >= 4) { 
     loopVid.currentTime = 0; 
     loopVid.play(); 
    } 
}

但在所有情況下，瞬間的停頓依然存在，敗壞了效果。我接受任何想法？

來源

2015-03-03 Steve

此答案可能有所幫助：https://stackoverflow.com/questions/17930964/video-element-with-looping-does-not-loop-videos-seamlessly-in-chrome-or-firefo/18143741# 18143741 – K3N 2015-03-03 10:53:56

您也可以嘗試將'loop'屬性設置爲true /設置時間（並且設置新時間也會觸發異步事件）。 – K3N 2015-03-03 11:02:05

@ KenFyrstenberg：謝謝你肯。我確實讀過你以前的回答，但正如你所說的你的解決方案只是減少了我曾經希望的一個完全無縫的解決方案，現在已經介紹了自己的故障。我欣賞這個輸入。我已經嘗試過你的循環建議，但沒有成功。 – Steve 2015-03-04 20:28:11

由於此問題是Google的熱門搜索結果，但「技術上」沒有答案，所以我想提供我的解決方案，該解決方案有效，但有一個缺點。另外，公正的警告：我的回答使用jQuery。

看起來在視頻循環中的輕微暫停是因爲html5視頻需要時間從一個位置尋找另一個位置。因此，當視頻結束時，試圖告訴視頻跳轉到開始並不會有任何幫助，因爲搜索仍會發生。所以這裏是我的主意：

使用JavaScript克隆標籤，並克隆坐在隱藏，暫停，並在開始。事情是這樣的：

var $video = $("video"); 
var $clone = $video.clone(); 
$video.after($clone); 

var video = $video[0]; 
var clone = $clone[0]; 

clone.hidden = true; 
clone.pause(); 
clone.currentTime = 0;

是的，我用clone.hidden = true代替$clone.hide()。抱歉。

無論如何，此後的想法是檢測原始視頻何時結束，然後切換到克隆並播放它。這種方式只會改變DOM中顯示哪個視頻，但實際上在克隆開始播放之前沒有必要進行搜索。因此，隱藏原始視頻並播放克隆後，您會將原始圖像恢復到開頭並暫停播放。然後，您將相同的功能添加到克隆中，以便在完成後切換到原始視頻等。只需來回翻轉即可。

例子：

video.ontimeupdate = function() { 
    if (video.currentTime >= video.duration - .5) { 
     clone.play(); 
     video.hidden = true; 
     clone.hidden = false; 
     video.pause(); 
     video.currentTime = 0; 
    } 
} 

clone.ontimeupdate = function() { 
    if (clone.currentTime >= clone.duration - .5) { 
     video.play(); 
     clone.hidden = true; 
     video.hidden = false; 
     clone.pause(); 
     clone.currentTime = 0; 
    } 
}

我之所以加入- .5是因爲在我的經驗，currentTime實際上從未達到相同的值duration爲視頻對象。它變得非常接近，但從來沒有在那裏。在我的情況下，我可以負擔得起半秒鐘的時間，但在你的情況下，你可能想要在儘可能小的時候調整這個值，同時仍然工作。

所以這裏的，我有我的網頁上我的全部代碼：

!function($){ 
$(document).ready(function() { 

$("video").each(function($index) { 
    var $video = $(this); 
    var $clone = $video.clone(); 
    $video.after($clone); 

    var video = $video[0]; 
    var clone = $clone[0]; 

    clone.hidden = true; 
    clone.pause(); 
    clone.currentTime = 0; 

    video.ontimeupdate = function() { 
     if (video.currentTime >= video.duration - .5) { 
      clone.play(); 
      video.hidden = true; 
      clone.hidden = false; 
      video.pause(); 
      video.currentTime = 0; 
     } 
    } 

    clone.ontimeupdate = function() { 
     if (clone.currentTime >= clone.duration - .5) { 
      video.play(); 
      clone.hidden = true; 
      video.hidden = false; 
      clone.pause(); 
      clone.currentTime = 0; 
     } 
    } 

}); 

}); 
}(jQuery);

我希望這將是爲別人有用。它適用於我的應用程序。缺點是.5，所以如果有人想出一個更好的方式來檢測視頻到底什麼時候結束，請評論，我會編輯這個答案。

來源

2016-04-27 17:08:56

Thx爲您的答案。你能舉一個jsfiddle的例子嗎？ – sidney 2017-01-14 14:44:07

我設法解決了我的代碼循環問題，非常感謝！請注意，而不是.5，我設置了0.2，現在我的視頻完全沒有了。再次感謝！！ – sidney 2017-01-14 14:58:22

是的，我認爲這個數字需要根據視頻的具體需求進行調整。很高興它對你有效！ – 2017-01-16 15:21:59

我發現，如果我使用mp4或ogv文件，Firefox會在循環時造成口吃。我改變了我的頁面中的代碼，先嚐試使用webm文件，突然間斷了口吃，視頻無縫循環，或者至少足夠接近以至於我沒有看到問題。如果你還沒有給出一個鏡頭，可以嘗試將文件轉換爲webm格式並加載。

來源

2016-08-08 18:36:32 Kadima

無縫的HTML5視頻循環

回答

相關問題