Gibt es eine Möglichkeit, zwei Videos in einer Webseite ohne Plugins synchronisiert zu halten?

Question

Gibt es eine Möglichkeit, zwei HTML5-Video-Tags auf einer Seite zu verwenden und die Videos synchron zu halten? Das heißt, wenn das erste Video 15,2 Sekunden lang ist, dann ist das zweite Video 15,2 Sekunden lang?

Ich habe mich umgesehen und SMIL gefunden, aber es sieht so aus, dass das nur in IE funktioniert. Ich habe auch versucht, etwas eigenes mit jQuery und jMediaElement zu implementieren, aber es scheint eine Menge Fälle zu geben, in denen die Videos nicht synchron laufen können.

Wurde dies schon einmal gemacht?

Answer 1

Es gefunden. Es war auf http://html5demos.com.

Zur Kasse demo .. funktioniert perfekt (naja fast) auf Chrome für mich.

Die Quelle ist auf der Seite verfügbar.

Answer 2

Die einzige Möglichkeit, Video ohne Plugins überhaupt abzuspielen, ist mit HTML5 oder SVG < video>. Es gibt keine zuverlässige Methode, um zwei HTML5-Videos synchron zu halten, aber wenn die exakte Synchronisierung nicht kritisch ist, könntest du ziemlich nahe kommen, indem du play() gleichzeitig anrufst oder play() und pause() auf den beiden Videos anrufst um sie ungefähr synchron zu halten, wie von Simeon angedeutet.

Wie für SVG < Video>, SVG hat bereits einige kleine (und modifizierte) Teilmenge von SMIL, so dass es möglicherweise bereits in der Spezifikation unterstützt wird, aber meines Wissens kein Browser wird dies richtig behandeln.

Answer 3

Sieht aus wie auch Opera dieses Problem hat (10. März 2010):

Es gibt derzeit keine gute API für Dinge mit der Timeline eines Video, zum Beispiel Bildunterschriften oder Infobox zu synchronisieren. Zu diesem Zweck hatte die Spezifikation früher "Cue-Bereiche" (die noch früher "Cue-Points" waren); es wird erwartet, dass etwas Ähnliches in der Zukunft

http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/

Btw hinzugefügt werden, ist der Artikel wirklich interessant, und vielleicht werden Sie einige nützliche Tipps in ihm finden.

Answer 4

Die Demo, die auf html5demos präsentiert wurde funktioniert, aber es kann leicht aus der Synchronisation geraten.

Hier ist ein Artikel mit einer Lösung, die Verwendung von request (Informationen darüber: Leaner, Meaner, Faster Animations with requestAnimationFrame, Animating with javascript: from setInterval to requestAnimationFrame) macht und es ist viel besser: HTML5 Video: Synchronizing Playback of Two Videos.

Beachten Sie, dass die dort bereitgestellte Demo (gehostet bei jsfiddle) eine falsche Verbindung zu einer js-Quelle hat. Ich kann es auf dieser neuen Seite aktualisiert:

http://jsfiddle.net/aqUNf/1/

Bedenken Browser-Unterstützung, diese Funktion von Firefox unterstützt wird, Chrome und Safari von 6 und IE 10 (table für weitere Details). Andernfalls fällt es auf setInterval zurück, das nicht die gleiche Leistung und den gleichen Batteriesparvorteil bietet.

(Es nutzt Popcorn.js durch die Art und Weise, die ein wirklich schönes Projekt von Mozilla ist)

Und hier ist der Code (direkt aus dem Demo genommen):

var videos = { 
    a: Popcorn("#a"),  
    b: Popcorn("#b"), 

}, 
scrub = $("#scrub"), 
loadCount = 0, 
events = "play pause timeupdate seeking".split(/\s+/g); 

// iterate both media sources 
Popcorn.forEach(videos, function(media, type) { 

    // when each is ready... 
    media.listen("canplayall", function() { 

     // trigger a custom "sync" event 
     this.trigger("sync"); 

     // set the max value of the "scrubber" 
     scrub.attr("max", this.duration()); 

    // Listen for the custom sync event...  
    }).listen("sync", function() { 

     // Once both items are loaded, sync events 
     if (++loadCount == 2) { 

      // Iterate all events and trigger them on the video B 
      // whenever they occur on the video A 
      events.forEach(function(event) { 

       videos.a.listen(event, function() { 

        // Avoid overkill events, trigger timeupdate manually 
        if (event === "timeupdate") { 

         if (!this.media.paused) { 
          return; 
         } 
         videos.b.trigger("timeupdate"); 

         // update scrubber 
         scrub.val(this.currentTime()); 

         return; 
        } 

        if (event === "seeking") { 
         videos.b.currentTime(this.currentTime()); 
        } 

        if (event === "play" || event === "pause") { 
         videos.b[ event ](); 
        } 
       }); 
      }); 
     } 
    }); 
}); 

scrub.bind("change", function() { 
    var val = this.value; 
    videos.a.currentTime(val); 
    videos.b.currentTime(val); 
}); 

// With requestAnimationFrame, we can ensure that as 
// frequently as the browser would allow, 
// the video is resync'ed. 
function sync() { 
    videos.b.currentTime( 
     videos.a.currentTime()   
    ); 
    requestAnimFrame(sync); 
} 

sync();