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>

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

1 个答案: