timesheets.js

<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

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

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:

a free codec, supported by Firefox, Opera, Chrome and optionnally all
desktop browsers — but not by the iPhone

a patented codec, which will always work with IE and Safari (including
the iPhone) but not with Firefox or Opera (~30% of market share).

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:

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:

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:

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):

no XHTML support — that’s a low priority bug since IE<9 doesn’t
support XHTML anyway, but we’ll submit a patch ASAP;

no WebM support: Adobe should enable WebM support in Flash 11
but until then, WebM isn’t supported by MediaElement.js;

for <video> elements, you’ll have to specify the “width” and
“height” attributes explicitely — MediaElement.js isn’t able to reuse
the width/height values that have been applied with CSS rules;

the Flash/Silverlight players that come with MediaElement.js don’t
include any user controls (play/pause button, timeline, volume
control…): you’ll have to provide your own. You’ll find a basic example
in our audio page, and nicer jQuery-based
controls are available on the MediaElement.js home page.

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