HTML5ビデオを所定の時間枠で繰り返します。

Question

私は、HTML5ビデオ要素に関連付けられたrepeat関数を作成しようとしました。そのため、プレーヤーは、指定した時間枠で繰り返すことができます。

私はので、私はプレイヤーが時間1秒に繰り返されますたいrepeat(1,3), repeat(5,7)、次の順序で、この関数を呼び出します - repeat(5,7)が呼び出されたときに7sec - repeat(1,3)は、その後、5秒呼び出されたときに3秒。

しかし、プレイヤーはrepeat(5,7)が呼び出されたときに1〜3秒のフレームを繰り返し続けます。私は問題があると知っていますの中でvideo.currentTime >= 3が真であり、プレーヤーは再び1秒の時間に行きます。しかし、私は何をすべきか分かりません。 repeat（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>