HTML5 Video and Audio elements can easily be synchronised using shared motion. Motion Corporation offers a ready-to-use JavaScript library MediaSynch that connects HTML5 media elements to motion. Here's how you do it in three simple steps.

Create your video and audio element in HTML as you would normally do.

<video id="videoplayer">
<source src="video.webm" type="video/webm">
<source src="video.ogg" type="video/ogv">
...
</video>
<audio id="audioplayer">
<source src="audio.ogg" type="audio/ogg" />
<source src="audio.mp3" type="audio/mp3" />
</audio>

You will not be needing the built-in media controls of the video element, so you should probably make sure they are hidden. Similarly, the audio element can be completely hidden. Instead, the video and audio will be remote controlled via shared motion. This is pretty cool, as it essentially allows HTML5 audio/video to be controlled from anywhere in the world. In particular you may use controls defined in Motion Control Tutorial.

<script type="text/javascript" src="http://www.mcorp.no/lib/mediasync.js"></script>

The above script includes the media sync library, where you will find MCorp.mediaSynch.

<script type="text/javascript">
...
app.run = function () {
   app.videosync= MCorp.mediaSync(videoelement, app.motions.yourmotion);
   app.audiosync= MCorp.mediaSync(audioelement, app.motions.yourmotion);
}
...
</script>    

If you have any additional issues, add {debug:true} as a third parameter.

The basic idea of MediaSynch is that HTML5 media elements take external direction, i.e., that the motion defines what should be displayed by the media element (at any point in time). So, MediaSynch works to maintain a correspondence between video.currentTime and motion.pos. If the difference between video.currentTime and motion.pos exceeds target, the video element needs to be re-adjusted.

Re-adjusting the audio/video element is simple and elegant, provided that the browser supports variable playback speed. Unfortunately, few browsers do at this point in time. The fall-back is to skip the media element by updating the currentTime property. However, as this can be a time consuming operation, delays are to be expected. The MediaSynch library works expected delays into the calculations of where to skip. Furthermore, there are other complications. The currentTime property is not always a thrustworty source of information, and each browser has its own peculiarities.

It is clear that media elements in current web browsers are not designed to be synchronised. This is not a surprise, as the need for this is likely triggered by the invention of shared motion. Still, the MediaSynch library provides amazingly good synch for the correct combinations of media formats/players and web browsers. It is also clear that if this problem was addressed by the media elements internally (i.e., media elements accepting a reference to external motion), as opposed to externally as we are forced to do now, the result would be much better. Also, we suspect it would not be difficult to do so.

Here we will document reasonable expectations for different browsers and different media formats.