播放完整的HTML5視頻，然後循環播放其中的一部分

Question

我試圖完全播放8.6秒的視頻，然後無限循環播放一小段視頻，以保持無盡的視頻幻覺。到目前爲止，我已看過視頻的media fragments URI和ended事件。在結束事件監聽器中設置currentTime屬性有效，但會使視頻「閃爍」。

目前，我使用timeupdate事件監聽器來改變當視頻正接近結束[下面示出]

elem.addEventListener('timeupdate', function() { 
if (elem.currentTime >= 8.5) { 
    elem.currentTime = 5; 
    elem.play(); 
} 
}, false); 

的jsfiddle here

此工程，以及時間，但視頻在5秒鐘重新啓動之前明顯暫停。是否有一種播放視頻的平滑方式，然後循環播放一段視頻？

Answer 1

嘗試以下，儘快「倒帶」，因爲它結束：

vidElem.addEventListener("ended", function() { 
     vidElem.currentTime = 2.5; 
     vidElem.play(); 
}, false); 

更新小提琴：http://jsfiddle.net/Lt4n7/1/

Answer 2

我不得不處理同樣的問題，發現有閃爍的同樣的問題。這裏是我的解決辦法：

• 獲取2個視頻（或套視頻） - 一個用於無環部分，其它爲環部分
• 創建2個視頻元素
• 設置循環元素「顯示：無」

然後，只需捕捉端事件和交換顯示器的狀態（例如用了jQuery但你可以使用「的style.display =‘無/塊’」一樣容易：

VideoPlayer1 = document.getElementById('video1'); 
VideoPlayer2 = document.getElementById('video2'); 
VideoPlayer1.addEventListener('ended', videoLooper, false); 

function videoLooper() 
{ 
    VideoPlayer2.play(); 
    $(VideoPlayer2).show(); 
    $(VideoPlayer1).hide(); 
} 

Answer 3

你的代碼很好，問題在於你的MP4文件！嘗試使用像這樣的小得多的視頻（http://www.w3schools.com/tags/movie.mp4）來確認問題不在您的代碼中。

那麼如何才能達到相同的結果，但與大視頻文件？ 您將需要兩個視頻文件：

• VIDEO1是主要的視頻
• 視頻2是循環播放的視頻

記住：HTML5視頻有沒有問題，玩和循環大的視頻文件，所以我們將使用這種方法播放視頻。

在下面的例子中，我們將播放第一個視頻，當它結束時，我們將執行一個功能來隱藏video1，然後顯示/播放video2。 （視頻2已經設置爲循環）

不要忘記加載JQuery在你的腦袋，否則這將無法正常工作。

<video id="video1" width="1080" height="568" poster="movie.png" autoplay onended="run()"> 
    <source src="movie.webm" type="video/webm"> 
    <source src="movie.ogg" type="video/ogg"> 
    <source src="movie.mp4" type="video/mp4"> 
    <object data="movie.mp4" width="1080" height="568"> 
    <embed width="1080" height="568" src="movie.swf"> 
    </object> 
Optional test to be displayed if the browser doesn't support the video tag (HTML 5) 
</video> 


<video id="video2" width="1080" height="568" poster="loop.png" loop> 
    <source src="loop.webm" type="video/webm"> 
    <source src="loop.ogg" type="video/ogg"> 
    <source src="loop.mp4" type="video/mp4"> 
    <object data="loop.mp4" width="1080" height="568"> 
    <embed width="1080" height="568" src="loop.swf"> 
    </object> 
Optional test to be displayed if the browser doesn't support the video tag (HTML 5) 
</video> 


<script> 
$("#video2").hide(); 
function run(){ 
    $("#video1").hide(); 
    $("#video2").show(); 
    document.getElementById("video2").play(); 
    }; 
</script> 

Answer 4

你不能用javascript解決這個問題。您看到的延遲取決於視頻壓縮和硬件。

要開始播放的時間不是0，視頻解碼器必須返回並找到key frame，然後通過讀取最後一個關鍵幀和所選時間之間的所有內容來構建當前幀。

我不是視頻壓縮方面的專家，但也許有一種方法可以選擇這些關鍵幀並將它們準確放置在需要它們的位置。不過，我認爲這並不容易。

---

如果你正在尋找一個簡單的解決方案，使用@Random's，但它使用兩個<video>標籤來解決此限制。

Answer 5

var iterations = 1; 
 
var flag = false; 
 
document.getElementById('iteration').innerText = iterations; 
 
var myVideo = document.getElementById('video-background'); 
 
myVideo.addEventListener('ended', function() { 
 
    alert('end'); 
 
    if (iterations < 
 
    2) { 
 
    this.currentTime = 0; 
 
    this.play(); 
 
    iterations++; 
 
    document.getElementById('iteration').innerText = i terations; 
 
    } else { 
 
    flag = t rue; 
 
    this.play(); 
 
    } 
 
}, false); 
 
myVideo.addEventListener('timeupdate', function() { 
 
    if (flag == t rue) { 
 
    console.log(this.currentTime); 
 
    if (this.currentTime > 
 
     5.5) { 
 
     console.log(this.currentTime); 
 
     this.pause(); 
 
    } 
 
    } 
 
}, false);

<div>Iteration: <span id="iteration"></span></div> 
 

 
<video id="video-background" autoplay="" muted="" controls> 
 
      <source src="https://res.cloudinary.com/video/upload/ac_none,q_60/bgvid.mp4" type="video/mp4"> 
 
    </video> 
 
<div>Iteration: <span id="iteration"></span></div>

//請注意，循環屬性不應該存在視頻元素，以便爲「結束」事件在IE和Firefox