start page | rating of books | rating of authors | reviews | copyrights

Book HomeWeb Design in a NutshellSearch this book

Chapter 27. Introduction to SMIL


How SMIL Works
SMIL Players
SMIL Authoring Tools
Writing SMIL
For Further Reading

SMIL (Synchronized Multimedia Integration Language, pronounced "smile") is a markup language (like HTML) for combining audio, video, text, animation, and graphics in a precise, synchronized fashion. A SMIL file instructs the client to retrieve media elements that reside on the server as standalone files. Those separate elements are then assembled and played by the SMIL player. The advantages of SMIL include the ability to:

SMIL is good for simple multimedia presentations, such as audio slideshows and videos with scrolling captions. However, it is not a substitute for the rich, high-impact interactivity offered by Flash or Shockwave.

The SMIL 1.0 recommendation, released in June of 1998, is one of the first XML-based DTDs proposed by the W3C (for an explanation of XML, see Chapter 30, "Introduction to XML"). As of this writing, SMIL 2.0, which greatly expands upon the functionality established in the initial specification, is on the verge of becoming a formal recommendation. The SMIL 2.0 specification is broken down into function-specific modules which can potentially be used with other XML languages. One proposed use, XHTML and SMIL, would allow time-based behaviors to be added to HTML elements without the use of a scripting language.

This chapter provides an introduction to how SMIL works and the elements used to control the timing and display of multimedia presentations.

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">
      <img src="image_1.jpg" begin="0s">
      <img src="image_2.jpg" begin="5s">
      <img src="image_3.jpg" begin="10s">

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.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.