SMIL: A Coder s Overview | Joseph Lowerys Beyond Dreamweaver

SMIL: A Coder's Overview

So what, exactly, does SMIL do, and how does it do it? Essentially, SMIL allows for the simultaneous or sequential interactive playback of various multimedia elements in a controlled layout. As noted earlier, SMIL is an XML-based language, and all SMIL documents start with an XML declaration:

 <smil xmlns="http://www.w3.org/2001/SMIL20/Language">

This declares a SMIL 2.0 document, while just

 <smil>

is sufficient for a SMIL 1.0 file.

Like HTML, SMIL files are divided into <head> and <body> regions . Unlike HTML, the <head> area is completely optional. If you just want to play back a video while showing a separate image, the entire SMIL page would look like this:

graphics/03icon01.gif

SMIL presentations take on many forms when played ; one example ”coded in Dreamweaver ”is shown in Figure 3.1.

Figure 3.1. By using only SMIL 1.0 tags, this presentation can be played in either the QuickTime or Real players.

graphics/03fig01.gif

The <head> region is used for <meta> tags and to establish the layout of the SMIL presentation. The <meta> tags work the same way that they do in HTM; the layout mechanism is something else. To specify a specific area in a SMIL presentation, a <region> tag is set within a <layout> and given a unique identifier, which is referenced by the media component. The following example establishes a video playback region, which is then referenced by the <video> tag:

graphics/03icon02.gif

If you think about it, the SMIL layout structure is really not so different from a strict CSS implementation of an HTML page. In both instances, the layout areas are defined in the <head> . Within HTML pages, the <style> tag contains the CSS declarations, whereas in SMIL pages, the definitions ” the <region> tags ”are found in the <layout> tag. And, in both cases, the <body> tag contains the actual elements (usually <div> tags in HTML and <img> , <video> , or other media tags in SMIL) that refer to the previously defined layout areas. Besides width and height, <region> tags can also be absolutely positioned with left and top attributes and can include a z-index , much like <div> tags in HTML.

The overall size of the presentation is controlled by another tag in the <layout> section: <root-layout> . With <root-layout> , the height, width, and background color can be specified:

 <root-layout width="500" height="500" backgroundColor="black">

The <root-layout> tag is a SMIL 1.0 implementation and somewhat limited; only one such tag can be defined in a presentation. If you're writing to SMIL 2.0 spec, you have a bit more flexibility by using the <topLayout> tag. Multiple <topLayout> tags are permitted and, besides dimension and color attributes, also include parameters that allow them to open and close as the media within them is played. You could, for example, have a video with streaming text presentation in the regions of one <topLayout> tag close when finished and allow a Flash animation with synchronized audio to begin playing.

SMIL offers two basic approaches to media playback over time: parallel and sequential. Media that is grouped in a <par> tag pair is played all at the same time, or in parallel; media within <seq> tags is played one after another, or sequentially. To play a video followed by an animation, the SMIL code would look like this:

 <seq>     <img src="images/slide01.rm" />     <img src="images/slide02.rm" />     <img src="images/slide03.rm" />     <img src="images/slide04.rm" />  </seq>

The <seq> tags are extremely useful for slideshow presentations. On the other hand, to display several media elements simultaneously , use code like this:

 <par>     <audio src="audio/narration.rm" />     <video src="video/tour.rm" />     <img src="images/poster.jpg" />  </par>

These essential timing tags are not exclusive ”you can nest one inside the other. In this example, an ongoing slideshow takes place at the same time as the audio and video presentation:

 <par>     <audio src="audio/narration.rm" />     <video src="video/tour.rm" />     <seq>        <img src="images/slide01.rm" />        <img src="images/slide02.rm" />        <img src="images/slide03.rm" />        <img src="images/slide04.rm" />     </seq>  </par>

These are the core elements of SMIL, but there is much more. Further exploration uncovers synchronization tags, transition elements, animation methods , and interactive modules, among others. You can find the entire SMIL specification, as well as many resources, at www.w3.org/AudioVideo/.

NOTE

A full discussion of SMIL is beyond the scope of this book, but if you're interested, be sure to check out SMIL: Editing Multimedia for the Web by Tim Kennedy and Mary Slowinski.