Chapter 27. Introduction to SMIL

27.1. How SMIL Works

SMIL uses tags to control the layout and timeline of a multimedia presentation. It is fairly intuitive, so 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-long narrated slideshow, in which an audio track plays as a series of three images display 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 our example, the images will display in slideshow fashion every five seconds.