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 ，将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 视频页面。

---

正如 Kaiido 在评论中所指定的，一个更简单的替代方法是在 JavaScript 中将video列表放在一个数组中，并相应地更新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/