HTML5 Video: Synchronizing Playback of Two Videos

Upon first thought, you might think that synchronized playback of two video elements would be simple – however – because the timeupdate event of the video element is indeterminate beyond its specification description of “Every 15 to 250ms, or whenever the MediaController’s media controller position changes”, this is actually non-trivial.

Today, on the Web Made Movies mailing list, a poster asked whether or not Popcorn.js was capable of synchronizing the playback of multiple videos or video and audio elements. While Popcorn.js does not ship with any kind of “sync A to B” functionality, it occurred to me that such a task should not be hard to achieve using Popcorn.js’s event management system.

With simplicity in mind, the concept goes like this: when Video A does something, trigger the same behaviour on Video B. Behaviours include, but are not limited to events such as play, pause, seeking and timeupdate. Armed with a rough plan, I created following fiddle….

After posting this back to the mailing list, Ben Moskowitz upped the ante by pointing out that synchronizing two videos is a much different beast, noting the example given on HTML5Demos.com – which easily falls out of sync (this fact is clearly a known flaw, hence the emphasis on “should” in the description).

So I returned to the fiddle and began reworking the demo to use two videos instead of an audio and video combo and I realized that what was needed was a simple way to subtly “re-sync” the video’s currentTime value, enter requestAnimationFrame. With requestAnimationFrame, I was able to quietly re-sync the two videos as frequently as the browser would allow:

Thanks to Paul Irish for requestAnimFrame()