Demo Multiple Media Resource Synchronisation

There are one video and three audio files that are played in parallel. You can watch how they go out of sync over time unless you pause, which re-syncs.

Note: The demo works best in Firefox version >= 3.5, but also in Chrome. It doesn't work (well) in Chrome or Safari. It will not work in IE.

Experiment description

This experiments with synchronising multiple media files with each other. Features:

• The main track is just the video without audio.
• There is an English sound track,
• a Spanish dub track, and
• an English Audio Description.
• The files are composed together like tracks of a single media source and made selectable through a menu.
• Every 500ms the currentTime of the media elements is displayed.

The main elements of this Web page are:

  <div id="tracks">
    <video class="v" src="elephants_dream/elephant.video.ogv" type="video/ogg">
    </video>
    <audio class="a1" src="elephants_dream/elephant.audio_description_amp.ogg" type="audio/ogg">
    </audio>
    <audio class="a2" src="elephants_dream/elephant.spanish.ogg" type="audio/ogg">
    </audio>
    <audio class="a3" src="elephants_dream/elephant.english.ogg" type="audio/ogg">
    </audio>
  </div>

Credits

Thanks to the Orange Open Movie Team for the Creative Commons licensed "Elephants Dream" movie that was used as an example here, (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org.

Spanish dub available from Sebastian Arias (http://www.youtube.com/watch?v=132x5VWVJ44).

The Audio Description was done by Silvia Pfeiffer using the Wikipedia descriptive storyline for Elephants Dream. It is available under a CC-BY-SA license.