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

<!DOCTYPE html>
    <link href="banner.smil" rel="timesheet" type="application/smil+xml">
    <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">

Where banner.smil contains:

<?xml version="1.0" encoding="UTF-8"?>
<timesheet xmlns="http://www.w3.org/ns/SMIL">
  <seq repeatCount="indefinite">
    <item select="#banner img" dur="3s"/>

SMIL compliant and passes the W3C validator. Does not require 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.:

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

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