A declarative approach for HTML Timing using SMIL Timesheets

<audio|video> elements are one of the most remarkable features in HTML5, and our timesheet scheduler is designed to take advantage of them. This page should help you using <audio|video> elements in your HTML Timing applications — even with IE6!

Codecs Supported By Modern Browsers

The HTML5 draft doesn’t recommend any media codec: several codecs can be used, here’s a quick compatibility table.

<audio> <video>
OGG/Vorbis MP3 AAC OGG/Theora WebM/VP8 MP4/H.264
IE6, IE7, IE8 no no no no no no
IE9 optional ⁽¹⁾ yes yes optional ⁽¹⁾ optional ⁽¹⁾ yes
Firefox 3.5+ yes no no yes no no
Firefox 4+ yes no no yes yes no
Safari 3+ optional ⁽²⁾ yes yes optional ⁽²⁾ optional ⁽²⁾ yes 
Safari/iPhone no yes yes no no partial ⁽³⁾
Chrome 6+ yes yes yes ⁽⁴⁾ yes yes yes ⁽⁵⁾
Chromium 6+ yes no no yes yes no
Opera 10.50+ yes no no yes no no
Opera 10.60+ yes no no yes yes no

 ⁽¹⁾ optional: available if the codec has been installed on Windows 7
 ⁽²⁾ optional: available if the codec has been installed as a QuickTime™ plugin
 ⁽³⁾ partial: the iPhone only supports the baseline profile of the H.264 codec
 ⁽⁴⁾ Chrome supports AAC files but only with an *.m4a extension
 ⁽⁵⁾ Google has announced that Chrome won’t support MP4/H.264 any more

To make a long story short: if you aim to deliver audio/video content to all platforms, you’ll have to encode your content in two formats:

Depending on your web server configuration, you might have to specify the MIME types of your media files — e.g. for an Apache server, add these lines to your .htaccess file:

AddType audio/ogg  .oga .ogg
AddType audio/mp3  .mp3
AddType audio/mp4  .m4a .aac

AddType video/ogg  .ogv
AddType video/webm .webm
AddType video/mp4  .m4v .mp4 

You can use open-source, cross-platform applications such as Audacity and Miro Video Converter to easily transcode your media files.

Fallback: MediaElement.js

Basic Usage

MediaElement.js allows to use standard HTML5 <audio|video> tags with any browser, and replaces these tags with a Flash or Silverlight fallback when necessary:

Technically speaking, MediaElement.js allows to specify a single mp3|mp4 source for all your <audio|video> tags:

<audio src="myFile.mp3" autoplay preload="auto">
<video src="myFile.mp4" autoplay preload="auto" width="320" height="240">

However, the overall responsiveness of the Flash/Silverlight player isn’t as good as the native <audio|video> one, so we recommend specifying at least two sources for each tag (mp3|mp4 and ogg|webm) to get a better user experience with all browsers:

<audio autoplay preload="auto">
  <source src="myFile.ogg" type="audio/ogg">
  <source src="myFile.m4a" type="audio/mp4">
  <source src="myFile.mp3" type="audio/mp3">
<video autoplay preload="auto" width="320" height="240">
  <source src="myFile.webm" type="video/webm">
  <source src="myFile.ogv"  type="video/ogg">
  <source src="myFile.mp4"  type="video/mp4">

Keep in mind that Firefox and Opera represent ~30% of the overall market share, and that licensing fees on patented codecs are considered as a serious threat in the long term. Use open standards!

Deployment With Timesheets.js

As of version 0.4, our timesheet scheduler relies on MediaElement.js to support <audio|video> and the MediaElement JavaScript API on older browsers. All you have to do is to include mediaelement.js in your <head> section before the timesheets.js script:

<script type="text/javascript" src="mediaelement.js"></script>
<script type="text/javascript" src="timesheets.js"></script>

If you have properly specified several sources for your media files, you can load this library for IE<9 only (along with other IE<9 specific libraries):

<!--[if lt IE 9]>
  <style type="text/css">
    /* insert your CSS hacks for IE<9 here */
  <script type="text/javascript" src="http://github.com/jeresig/sizzle/raw/master/sizzle.js"></script>
  <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <script type="text/javascript" src="mediaelement.js"></script>
<script type="text/javascript" src="timesheets.js"></script>

With this library you don’t have to specify any <object> fallback in your HTML markup, it will be added automatically by MediaElement.js. You don’t even have to initialize the MediaElement objects, this is handled by our timesheet scheduler.

Warning: the Flash/Silverlight plugins have to be located on your own web server. No hotlinking, no direct access through file:///[…]. We recommend storing these *.swf/*.xap files in the same directory as your mediaelement.js file.

Current Limitations

As of version 2.0.0 (2010-12-15):

This last point is by far the main limitation for our SMIL Timing implementation. We’re working on it.

HTML5 MediaElement API

W3C reference: HTML5 MediaElement API.