Demonstration Examples for
"The SMIL 2.0 Timing and Synchronization model"

These demos supplement the paper that can be found here. They are more completely explained in the paper, where the example syntax can also be found.

The examples use the XHTML+SMIL Language. The associated demos require Microsoft Internet Explorer version 5.5 or newer. The discussion assumes basic familiarity with XHTML and CSS 2. If you do not see anything when you click the "Start Demo" for each demo, try scrolling the page down a bit - the demo may just be offscreen to the bottom of your view.

  1. Example 1 - declaring media and using begin
  2. Example 2 - Adding durations, timeAction and Time containers
  3. Example 3 - Adding repeats, interaction and sync-arcs
  4. Example 4 - Animation and time manipulations
  5. Example 5 - Handling multiple begin and end conditions.

Example 1 - declaring media and using begin


SMIL Timing syntax consists of a set of
attributes for controlling the behavior of media,
and several types of time containers
that group media together for coordinated presentation.

The code for the simple example is:

<html>
<head>
<style>
  <!-- Bind the IE timing behavior to the needed elements -->
  t\:*, span { behavior:url(#default#time2); }
</style>
<XML:NAMESPACE PREFIX="t"/>
</head>
<body>
<t:audio begin="1s" src="media/talk.mp3" syncBehavior="locked" />
<p>
   <span begin="1s">SMIL Timing syntax consists of a set of </span><br>
   <span begin="4s"><em>attributes</em> for controlling the behavior of media,</span><br>
   <span begin="7s">and several types of <em>time containers</em></span><br>
   <span begin="9s">that group media together for coordinated presentation.</span>
</p>
</body>
</html>

Example 2 - Adding durations, timeAction and Time containers

In the example below, a par time container delays the entire animation for a second at the beginning, and the HTML <p> element is given sequence semantics to make the highlights appear one after another.


SMIL Timing syntax consists of a set of
attributes for controlling the behavior of media,
and several types of time containers
that group media together for coordinated presentation.

The code for the simple example is:

<html>
<head>
<style>
   <!-- Bind the IE timing behavior to the needed elements -->
   t\:*, p, span { behavior:url(#default#time2); }
  .highlight { background-color:yellow; font-weight:bold }
</style>
<XML:NAMESPACE PREFIX="t"/>
</head>
<body>
<!-- We wrap everything in a "par" so that it all starts together 1 second 
     after the page is loaded. --> 
<t:par begin="1s">
  <t:audio src="media/talk.mp3" syncBehavior="locked" />
  <!-- We set a timeAction to apply a highlight to the spans. 
       The p becomes a sequence time container for the highlights, 
       and the spans just need durations --> 
  <p timeContainer="seq" timeAction="none" >
    <span dur="2.9s" timeAction="class:highlight">
        SMIL Timing syntax consists of a set of </span><br>
    <span dur="3s" timeAction="class:highlight" >
        <em>attributes</em> for controlling the behavior of media, </span><br>
    <span dur="2s" timeAction="class:highlight" >
        and several types of <em>time containers</em> </span><br>
    <span dur="4s" timeAction="class:highlight" >
        that group media together for coordinated presentation. </span>
  </p>
</t:par>
</body>
</html>

The same principles shown in this demo generalize to a whole class of applications, including slide-show presentations synchronized to audio and video, lyrics that have highlights displayed in sync with music, captions and subtitles displayed in sync with video or audio (including news, movies, etc.), and variants on the theme for education, accessibility, etc.

Example 3 - Adding repeats, interaction and sync-arcs

The first two examples show the basics of timing and synchronization. Next, we show how to make things repeat, how to add interaction, and how to specify additional synchronization relationships.


Click here to begin.

SMIL Timing syntax consists of a set of
attributes for controlling the behavior of media,
and several types of time containers
that group media together for coordinated presentation.

The associated syntax for this is:

<html>
<head>
<style>
   <!-- Bind the IE timing behavior to the needed elements -->
   t\:*, p, span { behavior:url(#default#time2); }
  .clickable { text-decoration:underline; background-color:cyan; color:navy }
  .highlight { background-color:yellow; font-weight:bold }
</style>
</head>
<body>
<!-- The paragraph shows up immediately, and stays until user clicks on the anchor.
     It restarts just after "main" ends, so the user can listen again. -->
<p begin="0; main.end" end="start.click" timeAction="display">
   <a id="start" class="clickable">Click here to begin.</a> </p>

<!-- The main part of the presentation will repeat twice, so readers
     really get the point. -->
<t:par id="main" begin="start.click" repeatCount="2" timeAction="display">
<!-- We make the audio wait 1 second after "main" is displayed,
     and then we make the highlight sequence begin when the audio begins. --> 
    <t:audio id="talk" begin="1s" src="media/talk.mp3" syncBehavior="locked" />
    <p begin="talk.begin" timeContainer="seq" timeAction="none" >
      <span dur="2.9s" timeAction="class:highlight">
          SMIL Timing syntax consists of a set of </span><br>
      <span dur="3s" timeAction="class:highlight" >
          <em>attributes</em> for controlling the behavior of media, </span><br>
      <span dur="2s" timeAction="class:highlight" >
          and several types of <em>time containers</em> </span><br>
      <span dur="4s" timeAction="class:highlight" >
          that group media together for coordinated presentation. </span>
    </p>
</t:par>
</body>
</html>

Example 4 - Animation and time manipulations

This example illustrates a common use of advanced timing features for animation. The accelerate attribute applied to the motion simulates gravity. The autoReverse attribute causes the animation to bounce up and down. The same attributes align the color animation to the motion.

Bounce

The associated syntax for this is:

<html>
<head>
<style>
   <!-- Bind the IE timing behavior to the needed elements -->
   t\:*, h1 { behavior:url(#default#time2); }
</style>
</head>
<body>
  <h1 style="position:absolute; top:0; left:0" timeContainer="par" >
    Bounce
    <!-- Animate up and down (x=0, y=100), with accelerate to simulate gravity -->
    <t:animateMotion by="0,100" dur="3s" accelerate="1" autoReverse="true" 
                     repeatCount="indefinite" />
    <!-- Add a drift across the page (x=500, y=0) -->
    <t:animateMotion by="500,0" additive="sum" dur="18s" repeatCount="indefinite" />
    <!-- Fade color in and out in coordination with bounce -->
    <t:animateColor attributeName="color" from="white" to="gold" 
       dur="3s" accelerate="1" autoReverse="true" repeatCount="indefinite" />
  </h1>
</body>
</html>

The first motion animation creates vertical motion, accelerating down and then "bouncing" back up. The second motion animation adds in horizontal motion. It has a duration that is an even multiple of the vertical motion duration, so that they repeat in a coordinated manner.

Example 5 - Cyclic dependency example

One of most powerful aspects of the multiple begin and end times arises when timing is defined with a cyclic dependency, as in this example:

<p id="red"   begin="0; green.end-2s" dur="4s" .../>
<p id="blue"  begin="red.end-2s"      dur="4s" .../>
<p id="green" begin="blue.end-2s"     dur="4s" .../>

This shows the variant using a propagating cycle. Notice how each element fades into the next in a never-ending cycle. This might look like it could be done with a repeat, but it cannot. To see the closest approximation that just repeats the three elements in sequence, click here.

Red

Blue

Green

This shows the variant using a repeat. Notice how the blue and green fade in over the red, but the red starts a new cycle, and does not fade in over the green. To go back to the variant authored with a propagating cycle click here.

Red

Blue

Green