HTML5视频如何在一个视频元素中播放两个视频 [英] HTML5 video how to play two videos in one video element

问题描述

我试图让两个不同的视频在一个视频元素中播放，但只有两个音源才能播放第一个视频元素。
我应该使用jQuery来做这件事吗？
代码（HTML）：

 < video autoplay loop id =bbgVid> 
< source src =style / mpVideos / mpv1.mp4type =video / mp4> 
< source src =style / mpVideos / mpv2.mp4type =video / mp4> 
< / video> 
  

解决方案

正如我在评论中所提到的，不是播放列表，而是一组替代来源。一旦浏览器找到一个支持的，其余的都会被忽略。你必须使用JavaScript来实现你想要的东西（独立于使用一个或两个视频标签来完成）。

正如在你提到的问题中只有一个视频标记与不同的来源，这是一种可能性。这个想法如下：

• 添加一个事件侦听器到电影的最后。


• 视频完成后，将视频 src更改为下一个源的src。


• 请注意，此解决方案认为所有源视频都将受支持。

在JavaScript中，它会是这样的：

  var myvid = document.getElementById（'myvideo'）; myvid.addEventListener（'ended'，function（e）{// get活动源和下一个视频源//我设置它，如果没有下一个，它会循环到第一个var activesource = document.querySelector（＃myvideo source.active）; var nextsource = document.querySelector（ #myvideo source.active + source）|| document.querySelector（＃myvideo source：first-child）; //停用cu rrent源，并激活下一个activesource.className =; nextsource.className =active; //更新视频源并播放myvid.src = nextsource.src; < video; myvid.play（）;}）;  

这些视频来自 W3Schools HTML5视频页面。

---

正如Kaiido在评论中指定的那样，更简单的替代方法是在JavaScript中使用数组中的视频列表，并相应地更新视频源代码，而不是直接在视频下直接使用多个源代码：

  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）{//更新新的活动视频索引activeVideo =（++ activeVideo ）％ myvids.length; //更新视频源并播放myvid.src = myvids [activeVideo]; < video; myvid.play（）;}）;  

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

I am trying to get two different videos to play in one video element, but putting two sources only plays the first one. Should i do this with jQuery? Code(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>

解决方案

As I mentioned in the comments, the list of sources is not a playlist but a set of alternative sources. Once the browser finds one that is supported, the rest are ignored. You'll have to use JavaScript to achieve what you want (independently of doing it with one or two video tags).

As in the question you mention only to have one video tag with the different sources, here is a possibility. The idea is the following:

• Add an event listener to the end of the movie.
• Change the video src with the src of the next source once the video is completed.
• Note that this solution considers that all the source videos will be supported.

In JavaScript, it would be something like this:

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>

The videos are from the W3Schools HTML5 video page.

---

As specified by Kaiido in the comments, a simpler alternative would be to have the list of videos in an array in JavaScript and update the video source accordingly instead of having multiple sources directly under the 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>

You can also see it working on this JSFiddle: http://jsfiddle.net/bnzqkpza/

这篇关于HTML5视频如何在一个视频元素中播放两个视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！