home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  

Book HomeWeb Design in a NutshellSearch this book

27.4. Writing SMIL

Explaining every element, attribute, and behavior within the SMIL 2.0 specification is beyond the scope of this chapter; however, what follows is a thorough introduction to the basic structures and components of SMIL.

27.4.1. Well-Formed Code

SMIL is an XML-based language, which means that all of its code needs to be "well formed" according to the rules of XML (see Chapter 30, "Introduction to XML"). When writing SMIL (or any XML application), follow these rules:

  • Tags are case-sensitive. For the most part, single-word elements and attributes are in all lowercase (e.g., <region>, <audio>, <switch>). Multiple-word elements and attributes use mixed case, also called camel case (e.g. systemLanguage, <priorityClass>, borderColor). It is important to stick to the capitalization structures in the specification.

  • All attribute values must be contained in double quotation marks.

  • All tags must be closed. For container tags, the closing tag must be present (e.g., <tagname>...</tagname>). Empty tags (standalone elements that don't have closing tags, such as <img> and <br> in HTML) are closed by the addition of a slash at the end of the tag (e.g., <emptytag />).

  • Nested elements must not overlap (e.g., <switch><par></par></switch>, not <switch><par></switch></par>).

27.4.4. Media Elements

There are seven basic media objects that can be placed in a SMIL presentation: audio, video, images, text, streaming text, animation, and a generic media placement element for other media types. The following samples show the minimal code for adding media elements to the document:

<audio src="pathname/soundtrack.ra" />
<video src="pathname/movie.mov" />
<img src="pathname/illustration.gif" />
<text src="pathname/caption.txt" />
<textstream src="pathname/marquee.txt" />
<animation src="pathname/animation.gif" />
<ref src="pathname/special.rt" />

The audio, video, and img (image) objects are fairly self-explanatory; they should be produced appropriately for web delivery and saved in an appropriate file format. text adds a static text block to the page, while textstream scrolls the text like a marquee.

The animation element can be used for animated GIFs (see Chapter 23, "Animated GIFs" for more information on creating them) or animated vector graphics.


The SMIL 2.0 specification includes a complex animation module for adding motion and change over time to vector graphics and even HTML elements. The animation module of the specification defines the syntax and behavior of the <animate> element, which should not be confused with the basic <animation> media object mentioned previously.

The ref element is a generic placeholder tag for referring to any other type of media. For instance, RealNetworks uses the ref element to add its proprietary RealPix documents (a markup language for defining the presentation and behavior of streaming images) to a SMIL file, as shown in this example:

<ref src="rtsp://realserver.company.com/pix/ads.rp"/> Putting an element in its place

To place a media object in a particular region (as defined in the <layout> of the document), simply call the region by name within the media element tag using the region attribute as shown in this example:

    <root-layout width="400" height="400" />
    <region id="video1" width="320" height="240" top="40" left="40"/>
    <region id="caption" width="320" height="80" top="320" left="40"/>

   <video src="pathname/movie.mov" region="video1" />
   <textstream src="pathname/marquee.txt" region="caption" />

27.4.5. Timing the Presentation

The SMIL specification provides a number of methods for controlling the timing and synchronization of the presentation. Each presentation is considered to have a timeline along which the playback of various media is referenced.

27.4.6. Controlling Content Display

The <switch> element allows an author to list a number of media options, of which only the first acceptable option gets played; the remaining options are ignored. A media element is deemed "acceptable" when it passes specified test criteria. An example will make this clear.

In the following code, the player will play one of the listed audio files based on the user's connection speed (bit rate) to the Internet. The systemBitrate attribute performs a test of the user's connection speed, measured in bits per second. If the bit rate of the user's connection matches the systemBitrate value, it plays that media element. If not, it goes on to the next one until it finds one that matches the specified speed. Only one media in a <switch> element can be played.

<audio src="song-cd_quality.ra" systemBitrate="128000" />
<audio src="song-good_quality.ra" systemBitrate="56000" />
<audio src="song-low_quality.ra" systemBitrate="9600" />

Because the player uses the first media element in the list that passes the test criteria, you should list the options from most desirable to least desirable.

In the SMIL 1.0 specification, test criteria were hyphenated (e.g., system-bitrate and system-screen-size). This was deprecated by the SMIL 2.0 specification in favor of camel case attributes to be consistent with other developing standards. The following is a list of the predefined test attributes defined in SMIL 2.0.


New in SMIL 2.0. Specifies whether or not closed audio descriptions should be played. Closed audio aids sight-impaired users to understand video content the same way closed captioning supplements audio for the hearing impaired.

systemBitrate=number (bits per second)

Sets a target bit rate at which the media may be displayed.


Specifies whether a text caption appears in conjunction with an audio file.


New in SMIL 2.0. Tests for the various components of the SMIL player, for example, whether it supports JavaScript.


New in SMIL 2.0. Tests for the type of CPU on the user's machine (for example, X86 or PPC).

systemLanguage=two-letter language code

Tests the user's language preference so the proper language file can be served. See Chapter 7, "Internationalization" for a list of two-letter language codes.

systemOperatingSystem=defined operating system abbreviation

New in SMIL 2.0. Tests for the user's operating system. Example values include win9x, winnt, macos, beos, linux, unixware, etc.


Specifies whether overdub or subtitles are rendered. The SMIL 1.0 version, system-overdub-or-captions, has been deprecated.

systemRequired=xml namespace prefix

Compares the name of the XML namespace to those that are supported by the SMIL player.

systemScreenDepth=number (monitor color bit depth)

Tests the number of colors the user's monitor is capable of displaying. Typical values are 1, 4, 8, 16, 24, and 32.


Tests the size of the user's screen so customized content can be displayed to fit the available space. Typical values are 640X480, 800X600, and 1024X768.

Library Navigation Links

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