timesheets.js :: Documentation

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

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:

when the browser doesn’t support <audio|video> tags (mostly, IE6/7/8);
or when the browser doesn’t support the required codec.

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!

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 */
  </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.

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.

Codecs Supported By Modern Browsers

Fallback: MediaElement.js

Basic Usage

Deployment With Timesheets.js

Current Limitations

HTML5 MediaElement API