The demo presented on html5demos works, but it can easily get out of sync.
Here is an article providing a solution that uses requestAnimationFrame (information about this: Leaner, Meaner, Faster Animations with requestAnimationFrame , Animation using javascript: from setInterval to requestAnimationFrame ), and it is much better: HTML5 Video: Synchronization of playback of two videos .
Please note that the demo provided there (hosted in jsfiddle) has an incorrect js source reference. I updated it on this new page:
http://jsfiddle.net/aqUNf/1/
Remember browser support, this feature is supported by Firefox, Chrome and Safari 6 and IE 10 (see table for more information). Otherwise, it returns to setInterval, the witch does not provide the same performance and battery advantage.
(He uses Popcorn.js , which is a really nice Mozilla project)
And here is the code (directly taken from the demo):
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();
franzlorenzon
source share