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

HTML5 video how to play two videos in one video element

提问by Jojo01

I am trying to get two different videos to play in one video element, but putting two sources only plays the first one. Should i do this with jQuery? Code(HTML):

我试图让两个不同的视频在一个视频元素中播放，但放置两个源只播放第一个。我应该用 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>

回答by Alvaro Montoro

As I mentioned in the comments, the list of sources is not a playlist but a set of alternative sources. Once the browser finds one that is supported, the rest are ignored. You'll have to use JavaScript to achieve what you want (independently of doing it with one or two video tags).

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

As in the question you mention only to have one videotag with the different sources, here is a possibility. The idea is the following:

正如您提到的问题中只有一个video带有不同来源的标签，这是一种可能性。想法如下：

• Add an event listener to the end of the movie.
• Change the videosrc with the src of the next sourceonce the video is completed.
• Note that this solution considers that all the source videos will be supported.

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

In JavaScript, it would be something like this:

在 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>

The videos are from the W3Schools HTML5 video page.

这些视频来自W3Schools HTML5 视频页面。

---

---

As specified by Kaiido in the comments, a simpler alternative would be to have the list of videos in an array in JavaScript and update the videosource accordingly instead of having multiple sources directly under the video:

正如 Kaiido 在评论中指定的那样，一个更简单的替代方法是在 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>

You can also see it working on this JSFiddle: http://jsfiddle.net/bnzqkpza/

你也可以看到它在这个 JSFiddle 上工作：http: //jsfiddle.net/bnzqkpza/