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

Question

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

22

我正在尝试将两个不同的视频播放到一个视频元素中，但是只有第一个源被播放了。我应该使用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>

- Jojo01

为什么需要在一个视频标签中使用它？为什么不能使用两个标签？ - Mosh Feu

我希望视频成为页面的背景。因此，将两个视频放在彼此下面不是我想要的。 - Jojo01

仍然...创建2个视频，将它们的位置设置为“absolute”，并将它们放置在您想要的任何位置。 - Mosh Feu

他们将同时播放，我希望它们可以一个接一个地循环播放。 - Jojo01

2

所以使用JavaScript：firstVideo.addEventListener('ended',function(){ secondVideo.play(),false); https://dev59.com/dnE85IYBdhLWcg3wgDzd - Mosh Feu

1

源列表不是播放列表，而是一组备选源。一旦浏览器找到支持的源，其余的就会被忽略。您需要使用JavaScript来实现您想要的功能（无论是使用一个还是两个“video”标签）。 - Alvaro Montoro

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alvaro Montoro · Accepted Answer

正如我在评论中提到的那样，源列表不是播放列表，而是一组备用源。一旦浏览器找到支持的源，其余的源将被忽略。您需要使用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/