HTML5 视频在给定时间范围内重复

Question

我尝试创建一个与 HTML5 视频元素关联的 repeat 函数，因此它允许播放器在我想要的给定时间范围内重复播放。

我将按以下顺序调用此函数，repeat(1,3), repeat(5,7)，所以我希望播放器在调用 repeat(1,3) 时按时重复 1 秒 - 3 秒，然后在调用 repeat(5,7) 时重复 5 秒 - 7 秒。

然而，当调用repeat(5,7) 时，播放器会不断重复时间 1-3 秒帧。我知道问题是video.currentTime >= 3 在repeat(5,7) 中为真，并且玩家再次进入时间 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>