Question

我在使用HTML Video和JavaScript时遇到问题，因此编写了一些简单的代码来演示。有一个视频包含所有五秒钟长的三个“片段”（显然，在现实世界中，它们要长得多）。一次25到30秒，一次55到60秒，最后一次85到90秒。我希望用户能够在每五秒钟的剪辑中单击相应的按钮。

有两个问题：

Chrome浏览器的currenttimer（）错误似乎无法让您更改外部视频的开始时间（视频将存储在Azure Blob中）。似乎有很多帖子，但没有修复。
当您播放第一个剪辑然后尝试播放第二个剪辑时，因为剪辑2的开始时间在剪辑1的结束时间之后，所以它不会播放，因为AddEventListener仍然有效。有没有办法删除原始的EventListener或将其替换为新的结束时间？

这是正在使用的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div style="width: 700px; height: 400px; margin: auto; text-align: center;">
        <video id="video1" width="620" controls>
            <source type="video/mp4" src="external video link here" />
            Your browser does not support HTML5 video.
        </video>

        <input type="button" value="Play Clip 1 (25 - 30 seconds" onclick="javascript: showvid(25);" /><br />
        <input type="button" value="Play Clip 2 (55 - 60 seconds" onclick="javascript: showvid(55);" /><br />
        <input type="button" value="Play Clip 3 (85 - 90 seconds" onclick="javascript: showvid(85);" /><br />
    </div>

    <script type="text/javascript">
        function showvid(timer) {
            var myVideo = document.getElementById("video1");
            myVideo.currentTime = timer;
            myVideo.play();

            myVideo.addEventListener("timeupdate", function () {
                if (this.currentTime >= (timer + 5)) {
                    this.pause();
                }
            });
        }
    </script>
</body>
</html>

更新1

我已将事件侦听器检查更改为仅在当前时间在结束时间的一秒内才暂停视频。因此，如果下一个剪辑距离超过一秒，那么他们的监听器不会在剪辑开始之前停止播放。

仍在研究Chrome问题。

Answer 1

我不知道您在说什么Chrome错误，但是对于更简洁的代码，您可能会对#t=start[,end] Media Fragment感兴趣，它将使您可以将时间范围直接设置为的来源：

onclick =e=> {
  const data = e.target.dataset;
  if(!data.start) return;
  vid.src = vid.src.split('#')[0] +
    '#t=' + data.start + ',' + data.end;
  // url.vid#t=start,end
  vid.play();
}

<button data-start="5" data-end="10">play [5,10]</button>
<button data-start="35" data-end="40">play [35,40]</button>
<button data-start="00:01:25" data-end="00:01:30">play [00:01:25,00:01:30]</button>
<video id="vid" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" muted></video>

现在，如果您真的希望按照自己的方式做，那么您将对代码进行一些更改。

切勿从用户生成的事件中添加新的事件侦听器。

添加一次，仅触发信号量/更新用户事件中的变量。

因此，我们首先在上添加 timeupdate 事件，然后，如果没有发生用户生成的事件，我们将提早退出。否则，如果我们应该暂停或不暂停，我们将检查两个事件侦听器均可访问的变量（此处称为next_stop）。

然后，在按钮事件侦听器中，我们更新的currentTime，请求其播放并更新next_stop。

由于共享了next_stop变量，两个事件侦听器可以进行交互，但是不再有冲突。

let next_stop = Infinity; // a variable shared by both event listeners

// add the event listeners only once
vid.addEventListener('timeupdate', handleTimeupdate, {passive: true});
document.addEventListener('click', handleClick);

function handleTimeupdate(evt) {
  // not set? exit early
  if(!isFinite(next_stop)) return;
  // a single action
  if(this.currentTime > next_stop) {
    this.pause();
    // if you want to disable the range once it's done
    // e.g to allow default controls interactions
//    next_stop = Infinity;
  }
}

function handleClick(evt) {
  const times = parseTime(evt.target);
  if(!times) return;
  // update the video's current time  
  vid.currentTime = times.start;
  // update the shared variable
  next_stop = times.end;
  // start playing if needed
  if(vid.paused) {
    vid.play();
  }
}

function parseTime(target) {
  const data = target.dataset;
  if(!data || !data.start) return null;
  return {start: +data.start, end: +data.end};
}

<button data-start="5" data-end="10">play [5,10]</button>
<button data-start="35" data-end="40">play [35,40]</button>
<button data-start="85" data-end="90">play [00:01:25,00:01:30]</button>
<video id="vid" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" controls></video>

HTML 5视频：使用javascript

1 个答案:

切勿从用户生成的事件中添加新的事件侦听器。