HTML5 video su come riprodurre due video in un elemento video

Question

Sto cercando di ottenere due video diversi da riprodurre in un elemento video, ma l'inserimento di due sorgenti solo riproduce il primo. Dovrei farlo con jQuery? codice (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

Come ho già detto nei commenti, l'elenco delle fonti non è una playlist, ma un insieme di fonti alternative. Una volta che il browser ne trova uno supportato, il resto viene ignorato. Dovrai utilizzare JavaScript per ottenere ciò che desideri (indipendentemente dal fatto di farlo con uno o due tag video).

Come nella domanda si menziona solo per avere un tag video con le diverse fonti, qui è una possibilità. L'idea è la seguente:

• Aggiungere un listener di eventi alla fine del film.
• Modificare lo video src con lo src del successivo source una volta completato il video.
• Si noti che questa soluzione considera che tutti i video di origine saranno supportati.

In JavaScript, sarebbe qualcosa di simile:

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>

I video sono dalla W3Schools HTML5 video page.

---

Come specificato da Kaiido nei commenti, un'alternativa più semplice sarebbe quella di avere l'elenco dei video in un array in JavaScript e aggiornare l'origine video conseguenza invece di avere più fonti direttamente sotto il 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>

si può anche vedere che a lavorare su questo JSFiddle: http://jsfiddle.net/bnzqkpza/