HTML5 Web Video Captioning

Using MediaElement.js scripts to provide a HTML5 player with multiple subtitle tracks, which automatically falls back to a Flash or Silverlight version if necessary (depending on the browser). The video also contains a English QuickTime 608 CC track for compatibility with Apple iOS-based devices like the iPhone and iPad.

Workflow:

1. Create a H.264 video/AAC audio version of your video. (You may also upload additional formats such as WebM if desired.)
2. Add QuickTime 608 Closed Captions track using CPC's MacCaption closed captioning software - this is to support Apple iOS devices like iPhone & iPad, which only display this type of captions.
3. Also export a SubRip .SRT version of the captions for the HTML5/Flash/Silverlight version. You can even include multiple languages.
4. Download and install the free MediaElement.js software on your web server
5. On your webpage, add these to the header, to load the jQuery and MediaElement.js code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <link rel="stylesheet" href="mediaelementplayer.css">
<script type="text/javascript" src="mediaelement-and-player.js"></script>


6. Use this template to embed the video in the appropriate place in your web page:

<video class="mediaelement" width="X" height="Y" poster="poster.jpg" controls preload="none" >
<source type="video/mp4" src="video.mov" />
<track kind="subtitles" src="english.srt" srclang="en" />
</video>
<script>
// using jQuery
$('video.mediaelement').mediaelementplayer({ features: ['playpause','progress','current','tracks','volume'], startLanguage: 'en' });
</script>