A declarative approach for HTML Timing using SMIL Timesheets

A simple use case is to define an HTML rotating banner. Here’s an example, blatantly stolen from PortableLinuxApps.org but described with pure SMIL attributes:

CSS transition: | | | | |

HTML Markup

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      <smil:seq repeatCount="indefinite">
        <smil:item select="#banner img" dur="3s"/>
    <script type="text/javascript" src="timesheets.js"></script>
    <div id="banner">
      <img src="images/dosbox.png"       alt="relive the good old days"/>
      <img src="images/gnote.png"        alt="100% free software, 0% hassle"/>
      <img src="images/gpodder.png"      alt="simple, usable podcast consumption"/>
      <img src="images/transmission.png" alt="a fast, easy and free BitTorrent client"/>

SMIL compliant but doesn’t pass the W3C validator. Requires XHTML.


Note that the select attribute above performs a querySelectorAll() action: for each DOM node that is matched by the "#banner img" selector, a SMIL item is created.

This allows to reuse the same timesheet for several HTML pages: the SMIL markup above always works for any number of images in the banner.


'beginInc' is the other <item>-specific attribute defined in the SMIL Timesheets spec. It's rather used with par and excl time containers, e.g.:

    <smil:item select="#banner img" beginInc="3s" />

This timesheet would be equivalent to the one we use for this file.