HTML5视频如何在一个视频元素中播放两个视频

Question

我试图让两个不同的视频在一个视频元素中播放，但放置两个源只会播放第一个。 我应该用 jQuery 做这个吗？ 代码（HTML）：

<video autoplay loop id="bbgVid">
<source src="style/mpVideos/mpv1.mp4" type="video/mp4">
<source src="style/mpVideos/mpv2.mp4" type="video/mp4">
</video>

Answer 1

正如我在 cmets 中提到的，源列表不是播放列表，而是一组替代源。一旦浏览器找到一个受支持的，其余的将被忽略。您必须使用 JavaScript 来实现您想要的（独立于使用一两个视频标签来实现）。

在您提到的问题中，只有一个 video 标记具有不同的来源，这是一种可能性。思路如下：

• 在影片结尾添加事件侦听器。
• 视频完成后，将video src 更改为下一个source 的src。
• 请注意，此解决方案认为所有源视频都将受支持。

在 JavaScript 中，它会是这样的：

var myvid = document.getElementById('myvideo');

myvid.addEventListener('ended', function(e) {
  // get the active source and the next video source.
  // I set it so if there's no next, it loops to the first one
  var activesource = document.querySelector("#myvideo source.active");
  var nextsource = document.querySelector("#myvideo source.active + source") || document.querySelector("#myvideo source:first-child");
  
  // deactivate current source, and activate next one
  activesource.className = "";
  nextsource.className = "active";
  
  // update the video source and play
  myvid.src = nextsource.src;
  myvid.play();
});

<video id="myvideo" width="320" height="240" controls style="background:black">
  <source class="active" src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" />
</video>

视频来自W3Schools HTML5 video page。

---

正如 Kaiido 在 cmets 中所指定的，更简单的替代方法是将视频列表放在 JavaScript 中的数组中，并相应地更新 video 源，而不是在视频下直接拥有多个源：

var myvid = document.getElementById('myvideo');
var myvids = [
  "http://www.w3schools.com/html/mov_bbb.mp4", 
  "http://www.w3schools.com/html/movie.mp4"
  ];
var activeVideo = 0;

myvid.addEventListener('ended', function(e) {
  // update the new active video index
  activeVideo = (++activeVideo) % myvids.length;

  // update the video source and play
  myvid.src = myvids[activeVideo];
  myvid.play();
});

<video src="http://www.w3schools.com/html/mov_bbb.mp4" id="myvideo" width="320" height="240" controls style="background:black">
</video>

您还可以在此 JSFiddle 上看到它：http://jsfiddle.net/bnzqkpza/