Riproduci tag video html5 simultaneamente su Safari

Question

Ho questo comportamento strano sul tag video html5. Ho 4 video, che voglio giocare allo stesso tempo. Quindi creo la mia barra di controllo per riprodurre/mettere in pausa, quindi quando si fa clic sul pulsante di riproduzione, vengono riprodotti tutti e 4 i video, come il pulsante di pausa.

In safari, ha uno strano problema, il video non viene riprodotto allo stesso tempo, 1 o 2 video hanno un ritardo quando faccio clic su Play, quindi non tutti i video vengono riprodotti contemporaneamente.

Su Chrome e Firefox funziona perfettamente, cosa c'è di sbagliato in Safari?

Sto usando la funzione javascript .play() per riprodurre tutti i video.

Mi assicuro inoltre che il video sia caricato prima di riprodurlo. Qualcosa di simile,

<video id="example_video_1" class="video-js vjs-default-skin" preload="auto"> 
    <source src="asset/video/al_vertrag_kranken_v1_part1.ogv" type='video/ogg' /> 
    <source src="asset/video/al_vertrag_kranken_v1_part1.mp4" type='video/mp4' /> 
    <source src="asset/video/al_vertrag_kranken_v1_part1.webm" type='video/webm' /> 
</video> 

video_1 = document.getElementById('example_video_1'); 

if (video_1.readyState == 4 && video_2.readyState == 4 && video_3.readyState == 4 && video_4.readyState == 4) { 
    video_1.play(); 
    video_2.play(); 
    video_3.play(); 
} 

ci sono altri 3 tag video del genere, che 1 è solo un esempio.

Answer 1

ho notato che si sta utilizzando biblioteca Videojs (il video ha la classe "video-> js"

Si prega di controllare questo Ive violino preparato per voi di provare questo con Videojs

Penso che è quello che serve;)

Come si può vedere, il problema con Safari è sempre accadendo. In chrome o altri funziona perfettamente. Sembra essere prodotto da un ritardo che ha quando si avvia la riproduzione di video. Lo stesso accade quando la riproduzione inizia per l'audio.

forse in that stack troverai la soluzione.Sembra che la soluzione audio sia quella di generare un oggetto SWF (FLASH) e di riprodurre video con esso (non lo so, ma cercherò di preparare un'altra modifica alla risposta con un esempio)

MODIFICA

Ive trovato utile questa js libreria https://github.com/videojs/video-js-swf cercherò con esso per risolvere!

Spero che ti aiuti.

$(window).ready(function() { 
 

 
    alert("FIRST LOADING VIDEOS AND WAITING"); 
 

 

 
    var vid = document.getElementById("example_video_1"); 
 
    vid.oncanplay = function() { 
 
    startplay(1); 
 
    }; 
 
    var vid2 = document.getElementById("example_video_2"); 
 
    vid2.oncanplay = function() { 
 
    startplay(1); 
 
    }; 
 
    var vid3 = document.getElementById("example_video_3"); 
 
    vid3.oncanplay = function() { 
 
    startplay(1); 
 

 
    }; 
 
    var vid4 = document.getElementById("example_video_4"); 
 
    vid4.oncanplay = function() { 
 
    startplay(1); 
 
    }; 
 

 
}); 
 

 

 
var loaded = 0; 
 

 
function startplay(num) { 
 
    // alert(num); 
 
    loaded += 1; 
 

 
    if (loaded == 4) { 
 

 
    document.getElementById("example_video_1").play(); 
 
    document.getElementById("example_video_2").play(); 
 
    document.getElementById("example_video_3").play(); 
 
    document.getElementById("example_video_4").play(); 
 

 
    } 
 
}

<script src="http://vjs.zencdn.net/4.12/video.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<video id="example_video_1" class="video-js vjs-default-skin" preload="auto" width="640" height="264"> 
 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4' /> 
 
</video> 
 
<video id="example_video_2" class="video-js vjs-default-skin" preload="auto" width="640" height="264"> 
 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4' /> 
 
</video> 
 
<video id="example_video_3" class="video-js vjs-default-skin" preload="auto" width="640" height="264"> 
 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4' /> 
 
</video> 
 
<video id="example_video_4" class="video-js vjs-default-skin" preload="auto" width="640" height="264"> 
 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4' /> 
 
</video>

Answer 2

Sembra che la riproduzione di video multipli contemporaneamente non è attualmente supportato su Safari ...

da Safari HTML5 audio e video guida:

https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW10

multipli simultanei flussi audio o video

Attualmente, tutti i dispositivi con iOS sono limitati alla riproduzione di un singolo flusso audio o video in qualsiasi momento. Riproduzione di più di un lato video dal lato , parzialmente sovrapposti o completamente sovrapposti, non è attualmente supportato su dispositivi iOS. Anche la riproduzione di più flussi audio simultanei non è supportata. È tuttavia possibile modificare la sorgente audio o video in modo dinamico. Vedi Replacing a Media Source Sequentially per i dettagli.

Answer 3

Provare a monitorare l'evento canplay su tutti e 4 gli elementi. Qualcosa di simile

// Event trigger counter 
var i = 0; 
$('video').on('canplay', function(){ 
    i += 1; 
    // Start playback when everything is ready 
    if (i === 4) { 
     $('video').each(function(){ 
      this.play(); 
     }); 
    } 
}); 

Answer 4

Come da Guida Safari HTML Video Audio

la sincronizzazione di più elementi multimediali insieme fino a quando l'avvento di controllori dei media, in modo che due o più video riprodotti esattamente nello stesso tempo è stato uno sforzo impegnativo.

I controller multimediali consentono di raggruppare qualsiasi numero di elementi audio e/o video in modo che possano essere gestiti da un set universale di controlli e anche in modo che possano essere mantenuti in perfetta sincronia, anche se si verifica un'intervallo di rete.

Per creare un controller multimediale, è sufficiente aggiungere l'attributo mediagroup a tutti gli elementi che si desidera sincronizzare insieme . Il valore che si sceglie di assegnare a mediagroup dipende da voi, purché il valore sia lo stesso per ogni elemento slave, verrà creato un controller multimediale in modo implicito.

<video src="video.m4v" width="960" height="600" 
mediagroup="masterController"></video> 

maggior parte delle stesse funzioni , attributi, e eventi a disposizione gli elementi audio e video sono disponibili per i controllori dei media anche. Invece di chiamare play() o pause() direttamente sul video stesso, li chiami sul controller multimediale .

Controllo del supporto con JavaScript Sincronizzazione di più elementi multimediali insieme 2012-12-13 | Copyright © 2012 Apple Inc. Tutti i diritti riservati.

var myVideo = document.querySelector('video'); 
var mediaController = myVideo.controller; 
mediaController.play(); 

Nota: due attributi non supportati dai controller multimediali sono loop e autoplay.

L'accesso all'oggetto controller su uno qualsiasi degli elementi multimediali slave restituisce un controller degli elementi raggruppati . È inoltre possibile creare un controller multimediale interamente in JavaScript senza bisogno di modificare gli attributi del vostro HTML:

var myVideos = document.querySelectorAll('video'); 
var mediaController = new MediaController(); 
myVideos[0].controller = mediaController; 
myVideos[1].controller = mediaController; 
mediaController.play(); 

se uno bancarelle video o balbetta, gli altri video saranno automaticamente in pausa per attendere il video in ritardo per recuperare il ritardo . Quando i buffer del video sono pronti per essere riprodotti, i video rimanenti riprenderanno in sincronia.

Spero che questo aiuti ...

E si può trovare questo documento here