Spielen html5-video-tag gleichzeitig auf Safari

Ich Bemerkt, dass du die Verwendung von Videojs Bibliothek (dein video hat die Klasse "video-> js"

Bitte überprüfen Sie diese Geige ich habe für Sie vorbereitet, um dies zu testen mit Videojs

Ich denke, dass ist das, was Sie brauchen 😉

Wie Sie sehen können, das problem mit safari ist immer etwas Los. In chrome, oder andere, die seine Arbeit perfekt. Es scheint zu sein, erzeugt durch eine Verzögerung beim starten der Wiedergabe von videos. Das gleiche passiert, wenn die Wiedergabe beginnt für audio.

vielleicht in das stack youll finden Sie Ihre Lösung. Es scheint, dass die audio-Lösung ist, erstellen Sie eine swf (FLASH) Objekt und zum Abspielen von videos mit ihm (ich weiß nicht, über Sie, aber ill versuchen Sie zur Vorbereitung ein weiteres Bearbeiten, um die Antwort mit einem Beispiel)

BEARBEITEN

Ich fand diese js-Bibliothek https://github.com/videojs/video-js-swf Krank versuchen es zu lösen!

Hoffe es hilft dir.

JS:

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

  }
}

HTML:

<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>

Als pro Safari HTML-Audio-Video-Guide

Synchronisieren Mehrerer Media-Elementen Zusammen, Bis das Aufkommen der Medien-Controller, sicherzustellen, dass zwei oder mehr videos gespielt zu genau der gleichen Zeit war ein anspruchsvolles Unterfangen.

Medien-Steuerungen lassen Sie die Gruppe eine beliebige Anzahl von audio und/oder video-Elemente, so dass Sie verwaltet werden können, einen universal-Satz von Steuerelementen, und auch so, dass Sie gehalten werden kann, in perfekt synchron, auch wenn ein Netzwerk-Schluckauf Auftritt.

Erstellen Sie einen Medien-controller, fügen Sie einfach die mediagroup - Attribut auf alle Elemente, die Sie synchronisieren wollen
zusammen. Der Wert, den Sie wählen, zuordnen mediagroup ist bis zu Ihnen—solange der Wert ist der gleiche für jeden geschuftet element, ein media controller werden implizit erstellt.

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

Meisten die gleichen Funktionen, Attribute, und Veranstaltungen zur Verfügung, um audio-und video-Elemente sind ebenfalls verfügbar, um Medien-Controller. Anstelle von aufrufen play() oder pause() direkt auf das video selbst, Sie rufen Sie auf die
media controller.

Controlling Medien mit JavaScript
Synchronisieren Mehrerer Media-Elemente Zusammen
2012-12-13 | Copyright © 2012 Apple Inc. Alle Rechte Vorbehalten.

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

Hinweis: Zwei Attribute, die nicht unterstützt werden von media-Controller sind die Schleife und die automatische Wiedergabe.

Zugriff auf das controller-Objekt auf einem der slaved-media-Elemente geben eine Steuerung der gruppierten
Elemente. Sie können auch einen Medien-controller, der vollständig in JavaScript, ohne dass zum ändern der Attribute
deine HTML:

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

Wenn eine video-Stände oder stottert, die anderen videos werden automatisch angehalten, um zu warten, bis die rückständigen video, um aufzuholen. Wenn das video gepuffert und zum Abspielen bereit ist, die restlichen videos wird wieder in sync.

Ich hoffe das hilft...

Und finden Sie diese doc hier