how to sync a sequence of videos with audio

Question

i have a sequence of videos and an audio file. from the audio file seeker control i'd like to control the index of the video files.

i'd like to be able to do something like this:

<video mediagroup='test'>
    <source src='video1.webm' type='video/webm'> // 10secs
    <source src='video2.webm' type='video/webm'> // 10secs
    <source src='video3.webm' type='video/webm'> // 10secs
</video>
<audio controls='controls' mediagroup='test'>
    <source src='audio.ogg' type='audio/ogg'>    // 30secs
</audio>

if i scrub to the 21sec in the audio. the video should scrub to the 1sec of the video3 and be playable.

the html5 audio/video property mediagroup gives you this kind of syncing but how do you do it with a sequence of video files?

i think i can do this with javascript but does anyone know if there's a way to do this in just html?

Answer 1

I don't believe what you're trying to do is possible with mediagroup or in HTML without Javascript. mediagroup does not appear to support time offsets; all the media elements need to share the same currentTime value. Also, it is not yet supported in Firefox.

If you do want to try a Javascript implementation, I recommend starting with Popcorn Inception and taking a look at the example. It handles synchronizing multiple media (audio or video) elements to a single master element, with pausing, playing and seeking already taken care of. (I expect to push a few bug fixes in the next couple weeks.)

It's worth noting that your use of the <source> element is incorrect. A video (or audio) element can have multiple sources listed in case the browser is unable to play one or more of the listed files, it can fall back to other files in the list. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source