timesheets.js

SMIL Timing Support

Basic Timing

Our timesheet scheduler already supports most of the common SMIL Timing/Timesheets subset:

• all timeContainer values: <par>, <seq>, <excl>
• all timeAction values
• positive, numeric values of begin/dur and end time attributes
• the syncMaster attribute (for audio/video synchronization)
• first, prev, next, last attributes on <excl> and <seq> time containers ("lazy user interaction")

These attributes are partially supported:

• the fill/fillDefault attributes support hold and default values;
• the repeatDur/repeatCount attributes are partially supported on time containers, but they are ignored on child time nodes.

The endSync attribute isn’t supported yet.

Advanced Timing

Event-Values allow to describe user interactions in a declarative way (e.g. begin="elementID.click") and greatly ease the design of complex scenarios. They're partly supported by our timesheet scheduler, see the timeEvents page.

Note that these event-values are natively supported for SVG Animations in Firefox 4+, Opera 10.60+, Safari 5+, Chrome 4+.

SMIL Timesheets Support

Timing

Our timesheet parser supports all the SMIL Timing nodes above in both internal and external timesheets, as well as the Timesheet-specific <item> element and its attributes:

• select (see the selection mechanism section to see how it works)
• beginInc

The only limitation is that the index() function is not supported yet.

Prefetch

The <prefetch> element is not supported. It is defined in the SMIL PrefetchControl module and mentioned in the SMIL Timesheets draft, but it isn’t part of the SMIL Timing recommendation.

Animations

Our timesheet scheduler doesn’t support any of the <animate>, <animateMotion>, <animateColor> or <set> elements. These elements are defined in the SMIL BasicAnimation module and mentionned in the SMIL Timesheets draft, but they aren’t part of the SMIL Timing recommendation.

Browser Requirements

Modern Browsers

Our Timesheet Scheduler has been successfully tested with the following browsers:

• Microsoft Internet Explorer 9
• Mozilla Firefox 3.5 and newer
• Apple Safari 4 and newer
• Google Chrome 5 and newer
• Opera 10.60 and newer

Firefox users: CSS transitions require Firefox 4.
Internet Explorer users: CSS transitions aren’t supported by this browser.

Internet Explorer 6/7/8

Older versions of Internet Explorer are supported but you’ll have to cope with a few limitations — see the IE<9 page.

As you can guess, the main limitation is the lack of native <audio|video> support by IE<9. Starting with timesheets v0.4 you can rely on MediaElement.js to use Flash or Silverlight fallbacks — see the MediaElement page.

Note that these browsers support HTML+TIME, which is very similar to SMIL Timing though non-standard. HTML+TIME hasn’t been used much because of the lack of audio/video support by IE<9, and surprisingly, now that IE9 supports <audio|video> elements the HTML+TIME support has been removed by Microsoft. The good thing is, our SMIL Timing implementation works with audio/video on all IE versions. ;-)

SVG Timing

Our timesheet scheduler is designed to work with both HTML and SVG, check our SVG slideshow demo. Unfortunately, most web browsers don’t support native <audio> and <video> elements in SVG documents — though they’re supported as <foreignObject> — so we haven’t worked much on the SVG side so far.

If you have another good idea of an SVG + SMIL Timing demo, feel free to ping us and we’ll work on it.