HTML5-Video, wie zwei Videos in einem Videoelement wiedergegeben werden

Question

Ich versuche, zwei verschiedene Videos in einem Videoelement zu spielen, aber die Wiedergabe von zwei Quellen spielt nur die erste. Soll ich das mit jQuery tun? -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> 

Answer 1

Wie ich in den Kommentaren erwähnt, ist die Liste der Quellen nicht eine Playlist, sondern eine Reihe von alternativen Quellen. Sobald der Browser einen gefunden hat, der unterstützt wird, wird der Rest ignoriert. Sie müssen JavaScript verwenden, um das zu erreichen, was Sie wollen (unabhängig davon, ob Sie ein oder zwei Video-Tags verwenden).

Wie in der Frage erwähnt Sie nur eine video Tag mit den verschiedenen Quellen, hier ist eine Möglichkeit. Die Idee ist folgende:

• Fügen Sie am Ende des Films einen Ereignis-Listener hinzu.
• Ändern Sie die video Quelle mit der Quelle der nächsten source, sobald das Video abgeschlossen ist.
• Beachten Sie, dass diese Lösung berücksichtigt, dass alle Quellvideos unterstützt werden.

  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>

  Die Videos von der W3Schools HTML5 video page sind:

In JavaScript, wäre es so etwas wie dieses.

---

Wie Kaiido in den Kommentaren angegeben, eine einfachere Alternative, um die Liste der Videos in einem Array in JavaScript und aktualisieren Sie die video Quelle entsprechend, anstelle von mehreren Quellen direkt unter dem Video zu haben wäre:

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>

Sie können auch sehen, daß es auf dieser JSFiddle arbeiten: http://jsfiddle.net/bnzqkpza/