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更改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在评论中所指出的，更简单的替代方法是在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/

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

1 个答案: