给定时间范围内的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>