Is there a way to use two HTML5 video tags on a page and keep the videos synchronized? Meaning that if the first video is at 15.2 seconds then the second video is at 15.2 seconds?
I've looked around and found SMIL but it looks like that only works in IE. I also tried to implement something of my own with jQuery and jMediaElement but there appears to be a lot of cases where the videos can get out of sync.
Has this been done before?
Using jQuery you could set up a function using setInterval, that checks and if neccessary syncs the videos. Use video.currentTime to get and set the playback value.
The only way to play video at all without plugins is with HTML5 or SVG <video>. There is no reliable method of keeping two HTML5 videos synchronized, but if exact sync isn't critical you could probably get pretty close by just calling play() at the same time or otherwise calling play() and pause() on the two videos to get them in approximate sync as hinted at by Simeon.
As for SVG <video>, SVG already has some small (and modified) subset of SMIL, so it may already be supported in the spec, but to my knowledge no browser will handle this properly.
Looks like even Opera has this issue (10 MAR, 2010) :
There's currently no good API for synchronizing things with the timeline of a video, for instance captions or infoboxes. The spec has had "cue ranges" for this purpose earlier (which even earlier were "cue points"); it is expected that something similar will be added in the future
http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
Btw, the article is really interesting, and maybe you will find some useful tips in it.
Found it. It was on http://html5demos.com.
Checkout this demo.. works perfectly (well almost) on Chrome for me.
The source is available on the page.