HTML and CSS Reference
In-Depth Information
Synchronising media tracks
HTML5 will allow for alternative media tracks to be included and
synchronised in a single <audio> or <video> element .
Yo u m i g h t , f of r e x a m p l e , h a v e s e v e r a l v i d e of s of f a s p of r t i n g e v e n t ,
each from different camera angles, and if the user moves to a
different point in one video (or changes the playback rate for
slow motion), she expects all the other videos to play in sync.
Therefore, different media files need to be grouped together.
This could be a boon for accessibility, allowing for sign-language
tracks, audio description tracks, dubbed audio tracks, and similar
additional or alternative tracks to the main audio/video tracks.
MediaElement.js, King of the Polyfills
MediaElement.js ( www.mediaelementjs.com ) is a plugin developed by John Dyer ( http://j.hn ) , a web devel-
oper for Dallas Theological Seminary.
Making an HTML5 player isn't rocket surgery. The problem comes when you're doing real world video and
you need to support older browsers that don't support native multimedia or browsers that don't have the
codec you've been given.
Most HTML5 players get around this by injecting a completely separate Flash Player. But there are two
problems with this approach. First, you end up with two completely different playback UIs (one in HTML5
and one in Flash) that have to be skinned and styled independently. Secondly, you can't use HTML5 Media
events like “ended” or “timeupdate” to sync other elements on your page.
MediaElement.js takes a different approach. Instead of offering a bare bones Flash player as a fallback,
it includes a custom player that mimics the entire HTML5 Media API. Flash (or Silverlight, depending on
what the user has installed) renders the media and then bubbles fake HTML5 events up to the browser.
This means that with MediaElement.js, even our old chum IE6 will function as if it supports <video> and
<audio>. John cheekily refers to this as a fall “forward” rather than a fallback.
On mobile systems (Android, iOS, WP7), MediaElement.js just uses the operating system's UI. On the
desktop, it supports all modern browsers with true HTML5 support and upgrades older browsers. Addition-
ally, it injects support using plugins for unsupported codecs support. This allows it to play MP4, Ogg, and
WebM, as well as WMV and FLV and MP3.
MediaElement.js also supports multilingual subtitles and chapter navigation through <track> elements
using WebVTT, and there are plugins for Wordpress, Drupal, and BlogEngine.net, making them a no-
brainer to deploy and use on those platforms.
A noble runner-up to the crown is LeanBack Player http://dev.mennerich.name/showroom/html5_video/
with WebVTT polyfilling, no dependency on external libraries, and excellent keyboard support.
 
 
Search WWH ::




Custom Search