Web Design in a Nutshell, 3rd Edition

How SMIL works

The best way to get a quick understanding of SMIL is to look at a simple example. The following SMIL code creates a 15-second narrated slideshow, in which an audio track plays as a series of three images displayed in sequence.

<par dur="15s">
<audio src="audio_file.mp3" begin="0s" />
   <seq>
      <img src="image_1.jpg" begin="0s" />
      <img src="image_2.jpg" begin="5s" />
      <img src="image_3.jpg" begin="10s" />
   </seq>
</par>

Looking at the code, it is easy to pick out the audio and image elements. Each points to a separate media file on the server.

All elements contained within the <par> element are played in parallel (at the same time); therefore, the audio will continue playing as the images are displayed. The image elements are contained in the <seq> element, which means they will be played one after another (in sequence). The begin attribute gives timing instructions for when each element should be displayed. In the example, the images will display in slideshow fashion every five seconds.

For more information on SMIL, take a look at SMIL 2.0: Interactive Multimedia for Web and Mobile Devices by Dick C.A. Bulterman and Lloyd Rutledge (Springer). Or you can check out these online resources.

W3C SMIL resources

Go right to the source for a good starting place for research or to keep up to date on the latest developments. See http://www.w3.org/AudioVideo/. For a thorough explanation of all SMIL elements and their supported attributes and values, make your way through the SMIL 2.0 ...