HTML5-video, wie man ein Spiel mit zwei videos in einem video-element

Als ich erwähnte in den Kommentaren, die Liste der Quellen ist nicht eine playlist sondern eine Reihe von alternativen Quellen. Nachdem der browser eine findet, wird unterstützt, der rest wird ignoriert. Sie haben, JavaScript zu verwenden, um zu erreichen, was Sie wollen (unabhängig, es zu tun mit einem oder zwei video-tags).

Als in der Frage, die Sie erwähnen, nur um eine video tag mit den unterschiedlichen Quellen, hier ist eine Möglichkeit. Die Idee ist folgende:

• Fügen Sie einen Ereignis-listener, um das Ende des Films.
• Ändern Sie die video src mit src der nächsten source sobald das video fertig ist.
• Beachten Sie, dass diese Lösung die Auffassung, dass alle Quell-videos unterstützt werden.

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

JS:

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();
});

HTML:

<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 sind von der W3Schools-HTML5-video-Seite.

Als angegeben Kaiido in die Kommentare, eine einfachere alternative wäre es, die Liste der videos in einem array in JavaScript und aktualisieren Sie die video Quelle entsprechend, anstatt mehrere Quellen direkt unter dem video:

JS:

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();
});

HTML:

<video src="http://www.w3schools.com/html/mov_bbb.mp4" id="myvideo" width="320" height="240" controls style="background:black">
</video>

Können Sie auch sehen, es arbeiten auf diesem JSFiddle: http://jsfiddle.net/bnzqkpza/