Synchronize two video replays using Javascript

Here’s a quick Javascript I whipped up to make an HTML5 video object track a second HTML5 video object. I needed to do this because I had two videos from a talk – a video of the speaker and a video of his powerpoint presentation, both as MP4 files.

This script will trap events from one video window and pass them on to the other window so they stay in sync with each other. I’m posting it here because it may be useful to someone…

HTML5 Synchronize Video Test

7 thoughts on “Synchronize two video replays using Javascript

  1. Hannah

    certainly like your website but you need to test the spelling on several of your posts.
    A number of them are rife with spelling problems and I in finding it very troublesome to inform the
    truth however I will certainly come back again.

  2. Adam Post author

    At least I don’t write as badly as your comment Hannah, you may have run it through a spell-checker but that does not make it readable.

  3. Adam Post author

    Nope, this is HTML5 only.

    It might work with WMV files on IE but I very much doubt that WMV would work on other browsers.

  4. Mike

    Thank you for the response.

    I have opted to just junk the old thing I was doing and use this.

    Check this out:

    Uses the new article tag to display specific content based on the time index of the video. Simple code too. This would be a good alternative to what you have coded here for low bandwidth scenarios. Take jpg snapshots of one of the vids then place them in the article tag. I am going to investigate this a little better for what I am doing, as well as the above.

    Also, for really low bandwidth, say sub-3G, you could sync the article tags with an audio tag.

    Thanks again.

  5. Mike

    I forgot to mention two things.

    First, I added v2.mute() = true; to the end of the js because both vids have an audio track. Adding muted=”true” to the video tag did not seem to work in all browsers.

    Second, I could not get it to autoplay with webm on FF. It would immediately go to the end of the video. The user would have to seek the video to get it to play. Clicking play didn’t even work. After seeking, however, it worked as expected.

    Obviously, an issue with FF. I could only find one person with the same issue online. The suggestion was to start autoplay, using js, at 0.1 seconds into the vid. A solution was not provided and I could not come up with one (not too good at js myself). The asker turned to a hosting service instead that automatically streams the best video for the browser.

    Maybe you could weigh in on that.

    For my needs, I am almost considering a js alert that tells my users to ditch FF for Chrome. Having to have two of every single video is a little ridiculous. I have literally thousands of hours. I tried ogg, but compared to webm and mp4 it was very noticeably worse and larger file size(used miro video converter free). Miro could have been the webm problem, too. I found a few people online saying FF was picky about the kind of webm it will use. idk anything about that.

    Thanks again for the great handy code. It has opened a lot of options for me.

Comments are closed.