timesheets.js

A declarative approach for HTML Timing using SMIL Timesheets

summary | timeContainer | timeAction | timeEvents | IE<9 | MediaElement

Our Timesheet Scheduler is well supported by all modern browsers, i.e. all browsers supporting <audio> and <video> tags — including IE9. With older versions of Internet Explorer, however, there are a few limitations you should be aware of.

Limitations with Internet Explorer 6/7/8

<audio|video>

workaround: MediaElement.js + Flash/Silverlight.

As IE<9 does not support audio/video natively you’ll have to rely on a Flash or Silverlight plugin.

The MediaElement.js library replaces all <audio|video> elements with Flash/Silverlight objects when necessary, and brings a good emulation of the HTML5 MediaElement API that is required by our timesheet scheduler. This library is rather lightweight (12kB for the minified version, unzipped, plus 15kB for the *.swf player) and it comes with the same MIT license as our timesheet scheduler.

More details on our MediaElement page.

CSS Attribute Selectors

workaround: timeAction="visibility" by default on IE<9

IE6 does not support CSS selectors like *[smil=active], which are required when using the default ("intrinsic") timeAction. IE7 and IE8 do support such CSS selectors but unfortunately they aren’t responsive enough: after a smil attribute has been set, there’s a significant delay before the related style rules are applied.

Anyway, the main point of using this "intrinsic" timeAction is to use asymetric transitions, and IE doesn’t support CSS transitions yet, so the default timeAction mode is set to "visibility" instead of "intrinsic" for IE<9 in our timesheet scheduler.

*.querySelector() / *.querySelectorAll()

workaround: qwery.js, Sizzle.js, jQuery, YUI.

These methods (defined in the DOM standard API) are required for two SMIL/Timing attributes: mediaSync (to define a media element as syncMaster) and select (in SMIL Timesheets). IE6 and IE7 don’t support querySelector() at all. IE8 does support it but its CSS selector support is incomplete.

Unless you only use very simple CSS selectors in mediaSync or select attributes (read: "#[elementID]" or "[tagName]"), you should include a specific library such as qwery.js (1.7kB, minified/gzipped) or Sizzle.js (4kB, minified/gzipped) before loading the Timesheet Scheduler. Both qwery.js and Sizzle.js are released under MIT license.

Our Timesheet Scheduler will use a CSS selector library if available, then default to IE8’s querySelector, then use getElementById / getElementsByTagName for IE6 and IE7 if qwery/sizzle isn’t loaded. Note that besides qwery and sizzle, the jQuery and YUI frameworks are also supported: qwery.js is not required if you’re already using one of these frameworks.

Note that timesheets.js always exposes two CSS selector methods that you can use in your own JavaScript code:

QWERY.select(cssQuery [, context])
equivalent to document.querySelector(cssQuery) or context.querySelector(cssQuery)
QWERY.selectAll(cssQuery [, context])
equivalent to document.querySelectorAll(cssQuery) or context.querySelectorAll(cssQuery)

DOM Events

workaround: built-in "window.EVENTS" object.

IE<9 does not support addEventListener(): the IE-specific attachEvent() syntax is used instead, and it comes with a bunch of limitations. Among irritating corollaries:

Our timesheet scheduler includes an event management abstraction layer to work around these issues. If you intend to write a specific script to hook your own callbacks on begin/end events and if you want this script to work on IE<9, you’ll have to use the global window.EVENTS object that is exposed by the timesheet scheduler:

EVENTS.bind(node, type, callback)
equivalent to node.addEventListener(type, callback, false)
EVENTS.unbind(node, type, callback)
equivalent to node.removeEventListener(type, callback, false)

More information in the timeEvents page.

XHTML

workaround: none! Use HTML5 + html5shiv or Modernizr instead.

IE<9 does not support XHTML at all (i.e. sent as application/xhtml+xml): XPath and getElementsByTagNameNS queries can’t be used on these browsers. As a consequence, neither smil:* attributes nor internal timesheets are supported on IE<9.

To put it another way: if you want your pages to pass the W3C validator and to be compatible with all browsers including IE<9, use plain HTML with lowercase data-* attributes or external timesheets.

We highly recommend using an HTML5 doctype and sending it as text/html without any XML prolog. The thing is, if you use standard HTML5 tags such as <header>, <footer>, <article>, <section>, etc., IE<9 won’t be able to apply style rules properly on these elements or their children unless you load the html5shiv library (less than 1kB for the minified version, gzipped).

For more advanced cases, the well-known Modernizr library will do a similar job but will add specific classes to the <html> element in order to target specific browser functionality in your stylesheets. Modernizr includes html5shiv, so you don’t need to include both libraries. Both html5shiv and Modernizr are released under MIT license.

As a side note, if you want your pages to be well-formed XML documents (e.g. to apply XSL transformations), we recommend using an XHTML5 Polyglot Markup.

Recommended Markup

This HTML5 template should sum up most of the recommendations above: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> HTML Timing </title>
    <link rel="stylesheet" type="text/css" href="style/layout.css">
    […] 
    <!--[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>
  </head>
  <body>
    […]
    <div id="banner" data-timecontainer="seq" data-repeatcount="indefinite">
      <img data-dur="3s" src="images/dosbox.png"       alt="[…]">
      <img data-dur="3s" src="images/gnote.png"        alt="[…]">
      <img data-dur="3s" src="images/gpodder.png"      alt="[…]">
      <img data-dur="3s" src="images/transmission.png" alt="[…]">
    </div>
    […]
  </body>
</html>

Key points to get a W3C compliant, cross-browser HTML timing document: