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!
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.60+ | yes | no | no | yes | yes | no |
MIME type: | audio/ogg | audio/mp3 | audio/mp4 | video/ogg | video/webm | video/mp4 |
license: | free | patented | patented | free | free | patented |
Notes:
⁽¹⁾ 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
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.
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"> </audio>
<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"> </video>
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!
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 */ </style> <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> <![endif]--> <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.
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.
W3C reference: HTML5 MediaElement API.