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

正如我在评论中提到的,源列表不是播放列表,而是一组替代源.浏览器找到支持的浏览器后,其余部分将被忽略.你必须使用JavaScript来实现你想要的东西(独立于使用一个或两个视频标签).

正如在你提到的问题中只提到一个video具有不同来源的标签,这是一种可能性.这个想法如下:

• 将事件侦听器添加到影片的末尾.
• 视频完成后video,使用下一个src 更改src source.
• 请注意,此解决方案认为将支持所有源视频.

在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视频页面.

正如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>

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