我有一堆视频，需要按顺序播放

Question

我正在开发一个 Web 应用程序，其中包含 10 个要按顺序播放的视频。

我的主要要求是第二个视频必须仅在用户的第一个视频完成（到达结尾）时才对用户可见。我已经检查了 Stack Overflow 上的几个问题，他们定义了如何使用 JavaScript 使用“结束”动作侦听器检查视频是否完成，但我的要求略有不同。

Answer 1

根据this SO question，我们可以使用事件监听器轻松检查视频是否完成。例如：

<h1>Thanks to Big Buck Bunny</h1>

<video id="video1" controls>
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<video id="video2" style="display: none" controls>
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<script>
  // As seen on https://stackoverflow.com/questions/2741493/detect-when-an-html5-video-finishes
  document.getElementById('video1').addEventListener('ended',myHandler,false);
  function myHandler(e) {
    console.log("Done! Now change from display: none to display: block.");
  }
</script>

在此，我们确保 video2 不可见。这就是我们有display: none 的原因。在事件侦听器中，您必须将 display: none 更改为 display: block 以便它可见。

如果您需要这方面的帮助，可以在 Google 搜索中轻松找到。

您可以将它们链接在一起，以便在 video1 完成后，video2 可用，然后在 video2 完成后，video3 可用，等等。

希望我能帮助你解决你的问题:)