給定時間範圍內的HTML5視頻重複

Question

我試圖創建一個與HTML5視頻元素關聯的repeat函數，因此它允許播放器在給定的時間框內重複我想要的。

我會調用這個函數按以下順序，repeat(1,3), repeat(5,7)所以我希望玩家將重複在時間1秒 - 3秒時repeat(1,3)被調用，那麼5秒 - 7微秒時repeat(5,7)被調用。

然而，當調用repeat(5,7)時，播放器會不斷重複時間1-3秒幀。我知道問題是video.currentTime >= 3在repeat(5,7)中爲真，並且玩家再次到達1秒。但我不知道該怎麼做。當重複（5,7）被調用時，我應該刪除eventListener嗎？處理這個問題的正確方法是什麼？

repeat(startTime, endTime) { 
    var video = document.getElementsByTagName('video')[0]; 
    video.addEventListener('timeupdate', function() { 
    if (elem.currentTime >= endTime) { 
     elem.currentTime = startTime; 
     elem.play(); 
    } 
    }, false); 
} 

Answer 1

您需要包裹循環的代碼在一個名爲功能使您可以建立一個新的人之前刪除舊的循環。這是在funcLoop下

我也添加了一個檢查，如果你在舊的循環，並觸發一個新的然後它移動到開始（不知道你是否需要，但似乎使它更完整）

<video id="video" controls="controls" muted preload="metadata" > 
    <source src="video.mp4" type="video/mp4" /> 
</video> 
<button onclick="repeat(1,3)">1-3</button> 
<button onclick="repeat(5,7)">5-7</button> 

<script> 
var funcLoop 
function repeat(startTime, endTime) { 
    var video = document.getElementById('video'); 
    video.removeEventListener('timeupdate', funcLoop, false); 
    video.addEventListener('timeupdate', funcLoop=function(){ 
     if (video.currentTime < startTime) { 
      video.currentTime = startTime; 
     } 
     if (video.currentTime >= endTime) { 
      video.currentTime = startTime; 
     }}, false); 
    video.play(); 
} 
</script>