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

HTML5 video how to play two videos in one video element

本文关键字：视频 播放 两个 元素 一个 HTML5      更新时间：2023-09-26

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

正如我在评论中提到的，源列表不是播放列表，而是一组可选源。一旦浏览器找到一个受支持的，其余的就会被忽略。你必须使用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视频页面。

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

相关文章：