Spotlight

78 SEPTEMBER • OCTOBER 2001 http://computer.org/internet/ 1089-7801/01/$10.00 ©2001 IEEE IEEE INTERNET COMPUTING

SMIL 2.0:XML For Web Multimedia Lloyd Rutledge • CWI, Amsterdam

On 7 August, the World Wide Web Consor-tium (W3C) released version 2.0 of Syn-chronized Multimedia Integration Lan-

guage, or SMIL (pronounced “smile”). Three yearsago, SMIL 1.0 introduced a basic foundation forWeb multimedia and, as the sidebar “SMIL support”describes, it quickly gained widespread use. With aspecification document about 15 times as large asversion 1.0, SMIL 2.0 builds on this foundation andmarks an enormous step forward in multimediafunctionality.

Although Web multimedia has long been obtain-able with proprietary formats or Java programs, it’sbeen largely inaccessible to most Web authors andisolated from the Web’s technical framework.SMIL’s HTML-like syntax aims to do for multimediawhat HTML did for hypertext: bring it into everyliving room, with an easy-to-author descriptiveformat that works with readily available cross-plat-form players. SMIL lets authors create simple mul-timedia simply, and add more complex behavior

incrementally. But SMIL isn’t just HTML-like, it’sXML, which makes it part of the W3C’s family ofXML-related standards including scalable vectorgraphics (SVG), cascading style sheets (CSS),XPointer, XSLT, namespaces, and XHTML.

SMIL’s features fall into five categories: mediacontent, layout, timing, linking, and adaptivity. Thelatter brings altogether new features to the Web,letting authors adapt content to different marketgroups, user abilities, system configurations, andrun-time system delays. In this tutorial, I’ll covereach feature category and its basic constructs usinga simple SMIL presentation built with the SMIL 2.0Language Profile, which is the flagship SMIL-defined language for multimedia browsers.

SMIL 2.0 FeaturesFigures 1a and 1b show an example SMIL presen-tation, Fiets Amsterdam Tour. Fiets (pronounced“feets,” which is Dutch for “bicycle”) is an interac-tive multimedia tour of Amsterdam.

Figure 1. The Fiets Amsterdam Tour SMIL presentation. (a) Display of Fiets greeting section, set forDutch captions, on GRiNS Player for SMIL 2.0. (b) Display of Fiets thumbnail section, on RealPlayer1.

(a)(b)

IEEE INTERNET COMPUTING http://computer.org/internet/ SEPTEMBER • OCTOBER 2001 79

SMIL 2.0

Fiets starts with a splash screen logo (Figure 1a)and an audio introduction. The splash screen fadesin at the beginning and fades out when the wel-coming audio track is complete. Users can selectfrom either English or Dutch. For hearing-impairedusers, Fiets shows closed captions of the voice-over at the bottom of the display. Figure 1a fadesto Figure 1b, which shows three thumbnail imagesof Amsterdam buildings. Users can click on theseimages, in any order, to see a corresponding full-sized image in the main display area. Figure 2(next page) shows the SMIL code for the presenta-tions in Figure 1a and 1b.

Media Content The ‘I’ in SMIL stands for “Integration.” This isbecause SMIL does not create media, but ratherintegrates existing multiple media into a singlepresentation. To specify media elements, SMIL pre-sentations refer to files in other formats. Once thebrowser locates the media items, SMIL constructscontrol how the media will be presented.

The primary SMIL construct for retrieving mediacontent is the <ref> element, and its synonyms<img>, <video>, <audio>, <text>, <animation>,and <textstream>. Each instance of these ele-ments locates one media object to integrate intothe presentation. The media object element srcattribute, taken directly from HTML, states the Weblocation of the file holding the media object. Allmedia in a SMIL presentation are brought in usingthe src attribute. In Figure 2, these constructs arecoded in blue.

SMIL 2.0 also specifies transition effects thataccompany media as they start and stop playing.In Fiets, these make the logo in Figure 1a fade inand out. In Figure 2, line 22 shows the transInand transOut attributes, which indicate the tran-sition to apply when the media object appears anddisappears, respectively. The attributes’ value refersto a <transition> element defined for the SMILpresentation in the document head (see line 16).This code selects transition type “fade” from themore than 100 choices that SMIL offers. The fadegives the Fiets logo a one-second fade in and aone-second fade out.

LayoutOnce you’ve selected multiple media items as con-tent, you must coordinate their display in the mul-timedia presentation. SMIL layout lets you controlhow each media object is arranged on the screenand integrated into the overall presentation. Inpaper-based and Web publishing, designers pay

particular attention to text and image layout, as itcontributes much to the readers’ appreciation andunderstanding of the material.

In Figure 2, most of the SMIL layout code(shown in red) appears within the <layout> ele-ment in the document head. The <layout> ele-ment specifies one layout for the whole presenta-tion. It contains <topLayout> elements, each ofwhich defines a presentation window. AlthoughFiets has only one window, SMIL 2.0 presentationlets you include as many window-defining<topLayout> elements as you want. Each windowhas multiple rectangular regions. In Figure 2, redlayout code is also scattered throughout the codemain body, assigning region attributes to mediaobject elements and indicating the region in whichthey’ll play.

Figure 3 (page 81) shows how you place regionsand visual displays in their windows using theattributes top, bottom, left, right, height, andwidth. Each of these has a numeric value in eitherpixels or percentages. Using these values, you canposition a region relative to the boundaries of itscontaining block, which is typically defined by theregion’s parent element — either another region ora <topLayout> window. You need only assign twoof the three attributes along each dimension. If youassign fewer than two attributes for a dimension,SMIL defaults the missing attributes to the con-taining block’s boundary.

TimingSMIL’s foremost contribution to Web formats is its

For more information on SMIL and SMIL tools, see the following resources.Online

� Resources and examples used in this article • http://www.cwi.nl/~lloyd/Papers/Spotlight/

� SMIL 2.0 Specification • http://www.w3.org/TR/SMIL20/� W3C SMIL Links Page • http://www.w3.org/AudioVideo/� W3C Web Content Accessibility Guidelines 1.0 • http://www.w3.org/

TR/WAI-WEBCONTENT/� RealNetworks RealPlayer • http://www.real.com/products/player/� Oratrix GRiNS Player and Editor • http://www.oratrix.com/Products/

G2P?zone=G2P

Books

� H.Williamson, SMIL for Dummies, Hungry Minds, New York, 2001.� M. Slowinski and T. Kennedy, SMIL:Adding Multimedia to the Web, Sams

Publishing, Indianapolis, Ind., forthcoming in 2001.� L. Rutledge and D.C.A. Bulterman, SMIL: Interactive Multimedia on the Web,

Pearson Education, New York, forthcoming in 2002.

SMIL Resources

80 SEPTEMBER • OCTOBER 2001 http://computer.org/internet/ IEEE INTERNET COMPUTING

Spotlight

1 <!DOCTYPE smil PUBLIC “-//W3C//DTD SMIL 2.0//EN” “http://www.w3.org/TR/REC-smil/SMIL20.dtd”>2 <smil xmlns=“http://www.w3.org/2001/SMIL20/Language”> 3 <head> 4 <layout> 5 <topLayout title=“Fiets Amsterdam Tour” backgroundColor=“black” width=“1010” height=“665”> 6 <region regionName=“splashScreen” top=“5” left=“5” bottom=“5” right=“5”/> 7 <region regionName=“buildingImage” top=“5” right=“5” width=“875” height=“655”/> 8 <region regionName=“closedCaptioning” bottom=“5” left=“5” right=“5” height=“60”/> 9 <region title=“Thumbnail Bar” top=“5” left=“5” bottom=“5” width=“120”> 10 <region regionName=“stationThumb” fit=“meet” height=“90” top=“65” /> 11 <region regionName=“churchThumb” fit=“meet” height=“90” top=“280”/> 12 <region regionName=“CWI-INSThumb” fit=“meet” height=“90” top=“495”/> 13 </region> 14 </topLayout> 15 </layout> 16 <transition id=“fade1s” type=“fade” dur=“1s”/> 17 </head> 18 <body> 19 <seq> 20 <par title=“Greeting Section” end=“greet.end+1s”> 21 <img src=“FietsLogo.jpg” region=“splashScreen” end=“greet.end” 22 transIn=“fade1s” transOut=“fade1s” alt=“Logo for Fiets: a bicycle zone sign”/> 23 <par id=“greet” begin=“1s”> 24 <switch> 25 <par systemLanguage=“en”> 26 <audio src=“welcome.wav” region=“buildingImage” 27 alt=“Welcome to Fiets, your self-guided tour of Amsterdam (spoken)” /> 28 <text src=“welcome.html” region=“closedCaptioning” systemCaptions=“on” 29 alt=“Welcome to Fiets, your self-guided tour of Amsterdam (captions)”/> 30 </par> 31 <par systemLanguage=“nl”> 32 <audio src=“welkom.wav” region=“buildingImage” 33 alt=“Welkom bij Fiets, uw eigen stadswandeling door Amsterdam (gesproken)” /> 34 <text src=“welkom.html” region=“closedCaptioning” systemCaptions=“on” 35 alt=“Welkom bij Fiets, uw eigen stadswandeling door Amsterdam (ondertiteling)”/> 36 </par> 37 </switch> 38 </par> 39 </par> 40 <par title=“Thumbnail Section” dur=“indefinite”> 41 <par> 42 <a href=“#station” alt=“Show Centraal Station” > 43 <img src=“station.jpg” region=“stationThumb” alt=“Centraal Station thumbnail” /> 44 </a> 45 <a href=“#church” alt=“Show the Oude Kerk (Old Church)”> 46 <img src=“church.jpg” region=“churchThumb” alt=“Oude Kerk (Old Church) thumbnail”/> 47 </a> 48 <a href=“#CWI-INS” alt=“Show the CWI-INS building” > 49 <img src=“CWI-INS.jpg” region=“CWI-INSThumb” alt=“CWI-INS building thumbnail” /> 50 </a> 51 </par> 52 <excl dur=“indefinite”> 53 <img src=“station.jpg” id=“station” region=“buildingImage” alt=“Centraal Station” /> 54 <img src=“church.jpg” id=“church” region=“buildingImage” alt=“Oude Kerk (Old Church)”/> 55 <img src=“CWI-INS.jpg” id=“CWI-INS” region=“buildingImage” alt=“CWI-INS building” /> 56 </excl> 57 </par> 58 </seq> 59 </body> 60 </smil>

Color key: Media content Layout Timing Linking Adaptivity

Figure 2. SMIL code for Fiets Amsterdam Tour.The src attributes (blue code) indicate the media object’s Web location. SMILlayout instructions (red code) appear mainly within the layout element in the document head.Timing elements (purplecode) dominate the document body’s hierarchical composition.

IEEE INTERNET COMPUTING http://computer.org/internet/ SEPTEMBER • OCTOBER 2001 81

SMIL 2.0

sense of timing. Without SMIL, XML-defined Webpresentations are static: Users can move displaysusing the scroll bar and switch between themusing hyperlinks, but each presentation is itselfunchanging. With SMIL, XML presentationschange over time, with or without user interaction.This applies to more than just SMIL presentations;developers have added SMIL timing constructs toother XML-based formats as well.

Temporal composites. In Fiets, as in most SMILpresentations, timing elements (the purple code inFigure 2) dominate the hierarchical composition ofthe document body. SMIL’s timing elements, <seq>and <par>, appear often and are always parents ofother elements — typically other timing compositesor media object elements. The <seq> and <par>elements specify different temporal relationshipsbetween their children.

� The <seq> element specifies that its childrenplay in sequence, one after the other, in theorder in which they appear in the code. That is,the second child starts when the first one ends,the third child starts when the second ends, andso on. The <seq> element itself ends, bydefault, when the last of its children ends. InFigure 2, lines 19 and 58 show the start andend tags of Fiets’ single <seq> element. Its twochildren specify Fiets’ two main parts: theintroductory speech and logo, followed by thebuilding thumbnails.

� The <par> element specifies that its childrenplay in parallel, starting at the same time. The<par> element itself ends, by default, when allof its children have stopped playing. In Figure2, lines 25 through 30 show one of several<par> elements; this one simultaneously plays

the welcoming English audio and its corre-sponding closed-caption text.

SMIL’s temporal composites let you specify tim-ing information without using timestamps ornumbers. Instead, you build the timing structurearound the media’s implicit duration. For exam-ple, a sequence of videos plays each video until itends, then starts the next video, and thus youdon’t have to set begin times. Videos in a <par>play at the same time. Events triggered by the<par>’s ending happen, by default, when thelongest playing video ends. If the <par> itself is achild of a <seq>, then the next element in thesequence starts when the last video ends. Suchtemporal composition makes creating presenta-tions easier, because you don’t need to calculatetime markers. It also makes presentations moreadaptive to run-time delays: Timing is based onthe end of media presentations, even if their end-ing is delayed.

Timing attributes. To fine-tune the general timeline defined by SMIL’s temporal composites, youassign timing attributes — begin, end, and dur(duration) — to media object elements and timingcomposites. When you set the begin attribute, anelement will start a set length of time after itsdefault start. Thus, a child of a <par> would startat a set time after the <par> begins and a <seq>child would start at a set time after its previoussibling ends. Similarly, an end attribute stops anelement a set length of time after its default starttime. Finally, the dur attribute sets an explicitduration for the element to play, overriding itsimplicit duration.

Fiets uses these three attributes to refine itssynchronization. In Figure 2, line 23 has the

Image

Window

Reg

ion

posi

tioni

ngrightwidthleft

top

height

bottom

Parent region

Containing block

Region

Region

ImageImage

Figure 3. SMIL Layout model.The layout attributes let you position regions within containing blocks.

82 SEPTEMBER • OCTOBER 2001 http://computer.org/internet/ IEEE INTERNET COMPUTING

Spotlight

assignment begin=“1s”, which starts the <par>element grouping that contains the greeting audioand captions one second after the logo appears,leaving time for its one-second fade in. Line 52assigns a duration of “indefinite” to Fiets’thumbnail section. This gives the thumbnail sec-tion no scheduled stop time, which means anunscheduled event must end it, such as a userclosing the presentation. Finally, line 20 has amore complex assignment: end=“greet.end+1s”synchronizes the greeting section’s ending withthe ending of the “greet” element (the audio andclosed-caption welcome), adding one second forthe logo to fade out.

LinkingAlthough SMIL timing lets presentations progressby themselves, users need control to access theinformation they need — and to have a moreengaging experience. SMIL’s hyperlinking con-structs provide the key navigation paths for usersto traverse through Web multimedia. SMIL uses

the same Web hyperlinking con-structs as HTML, while alsoaccounting for the impact oftiming on user interaction.

As in HTML, SMIL’s primarylinking constructs are the <a>element and its href attribute.The <a> element containsmedia that users can “click” (orotherwise activate) to triggerthe link. The href value is aURI to the content triggered bythe link, such as another SMILpresentation.

SMIL linking uses the # char-acter for linking to document portions, just asHTML does. In both languages, a # in an hrefvalue links to the document portion named afterthe #. The document containing the portion isspecified before the #; if nothing appears beforeit, the link is to elsewhere in the same document.In HTML, browsers typically scroll the display towhere the named portion is shown. In SMIL, thelinked-to SMIL document starts playing at thenamed point, effectively fast-forwarding thewhole presentation up to that point.

SMIL 2.0 introduces the <excl> (exclusive) ele-ment, which lets users see Web linking in context:some portions of the document continue playingwhile other parts change to show the link’s desti-nation. This is possible because the <excl> ele-ment’s children play one at a time, in any order,

and have no implicit synchronization with the restof the presentation. Whenever one child is trig-gered to begin, other playing siblings stop and therest of the timing is unaffected (unless you setexplicit synchronization relations). The most com-mon use case for this is “jukebox buttons,” whichlet users trigger links in any order to play sub-pre-sentations that cancel each other out.

Fiets uses such jukebox buttons for its thumb-nail section. In Figure 2, the <par> spanning lines41 through 51 shows thumbnail images for thethree buildings. Each image is packaged in an <a>element linking to the display of the correspond-ing larger image. The larger images are containedin the <excl> spanning lines 52 through 56. Atthe beginning, none of the larger images isshown; each time a user clicks a smaller image,the corresponding larger image appears, cancel-ing the display of any other larger image show-ing at the time.

AdaptivityWeb documents are available to people all over theworld. In creating such documents, you often mustaccount for a wide variability in how users processinformation. SMIL helps you achieve this throughadaptivity, letting you tailor content according tocharacteristics such as language, perceptual abili-ties, and computing environment.

For adaptivity, the most important SMIL ele-ment is <switch>. The browser examines thechildren of each <switch> element in the orderin which they are encoded. Once it finds a childthat passes the tests for playability, it selects thatchild for play and ignores all the others. If it findsno children appropriate for play, none are played.

To determine playability, SMIL primarily relieson test attributes. These attributes typically statethe conditions that must be true for an element tobe played. In Fiets, for example, the developersused the systemLanguage attribute to indicatethat an element is only appropriate for users flu-ent in the stated language. In Figure 2, theattribute assignments on lines 25 and 31 state thatthe language of each version of the verbal greet-ing is, respectively, English and Dutch. The <par>elements with these assignments are in a<switch>, so only one (or possibly none) is playedfor each user.

An element does not have to be in a <switch>to be determined inappropriate for inclusion — ele-ments anywhere in the document are subject to thesame test. This enhances adaptivity by letting youplay optional elements for some presentations and

SMIL lets youtailor contentaccording tocharacteristicssuch as languageand computingenvironment.

IEEE INTERNET COMPUTING http://computer.org/internet/ SEPTEMBER • OCTOBER 2001 83

SMIL 2.0

not for others. Fiets applies this feature with closedcaptioning. The captioning elements on code lines28 and 34 have the systemCaptions=“on”

attribute assignment, meaning they are shownonly if captions are turned on in a user’s browser.Audio descriptions make multimedia accessible tosight-impaired users by offering a spoken accountof visual presentation elements. The elements inSMIL’s systemAudioDesc=“on” test attributeassignments play only if the user requests audiodescriptions.

Descriptive constructs enhance adaptivity byalerting disabled users to presentation contentthat they can’t directly perceive. The HTML andSMIL attributes title, alt, and longdesc givetextual accounts of subdocument and media itemcontent. The W3C strongly suggests using the altattribute in particular for all linking and mediaobject elements (for more on this, see the W3C’saccessibility guidelines in the “SMIL Resources”sidebar). Users who cannot perceive a document’spresented forms can then read (or hear, throughspeech synthesizers) their descriptions instead.You can also use these attributes as descriptivecomments in the SMIL code. Editing tools likeGRiNS help incorporate the descriptions intointerface displays.

ModularizationLike XML, SMIL is a metalanguage that lets youcreate other languages. By placing constructs intomodules, SMIL 2.0 lets you combine these mod-ules into your own profile — a tailored final-formlanguage for multimedia presentation. W3C pro-vides several examples of SMIL profiles: the SMIL2.0 Language Profile, SMIL Basic, XHTML+SMIL,and animated SVG.

SMIL Basic is a subset that contains only fea-tures that suit the limitations of a mobile environ-ment. Developers can thus create SMIL presenta-tions that won’t overwhelm mobile phones andpalmtop devices. SMIL Basic presentations canalso play on SMIL 2.0 Language Profile browsers.SMIL Basic is defined along with the SMIL 2.0Language Profile in the SMIL 2.0 Recommenda-tion specification.

XHTML+SMIL combines SMIL and HTML con-structs into one new language. This enables newuse cases, such as XML-based PowerPoint-likepresentations. Such presentations mix timing andtext in a layout that is based on text flow asdefined by HTML and CSS, rather than SMIL’stwo-dimensional layout. XHTML+SMIL alsoinherits HTML’s text-flow-based hierarchical com-

Like most W3C recommendations, SMIL 2.0 was developed and releasedwith strong industrial involvement and support.RealNetworks,Microsoft,and Oratrix have already announced SMIL 2.0 support in their upcomingbrowser releases.

RealNetworks’ RealPlayer began playing SMIL presentations soon afterSMIL 1.0 was released. Subsequent distribution of RealPlayer has put SMILon the desktops of over 15 million users. SMIL 1.0 frequently synchronizesmedia on RealNetworks’ Web site and documents it links to, for example.RealPlayer users are often unaware they are browsing SMIL presentations,and the same will likely be true as RealPlayer upgrades to SMIL 2.0.

Oratrix’s GRiNS has also been playing SMIL presentations from thestart. For the past year, GRiNS has kept up with every public release ofthe SMIL 2.0 draft specification and is now playing the Proposed Recom-mendation version of the SMIL 2.0 Language Profile. GRiNS’s main func-tion, however, is as an editor for SMIL 2.0, SMIL Basic, and XHTML+SMIL.It is particularly useful for managing large-scale SMIL-defined multimedia.Figure A shows a structural view of the Fiets presentation in Oratrix’sGRiNS editor for SMIL 2.0, scheduled for public release in September.

Microsoft’s Internet Explorer 5.5 (the currently released version) playsHTML+TIME, a prototype hybrid of SMIL constructs and HTML. IE 6.0 willplay XHTML+SMIL, and further the extensive, albeit quiet, spread of SMILthrough the Web.

Other browsers are providing single interfaces to multiple languagesas well. For example, Helsinki University of Technology has developed X-Smiles (www.xsmiles.org), a tool that presents XHTML, XML, SMIL, andother XML-based languages in one browser,making the existence of mul-tiple formats irrelevant to users.

SMIL Support

Figure A. GRiNS editor view of Fiets Amsterdam Tour. In additionto facilitating presentation editing, GRiNS helps developers man-age large-scale SMIL-defined multimedia.

84 SEPTEMBER • OCTOBER 2001 http://computer.org/internet/ IEEE INTERNET COMPUTING

Spotlight

position, rather than SMIL’s temporal composition,which affects how authors structure and maintaintheir documents. SMIL 2.0 and XHTML+SMIL areseparate W3C projects, and the latter is still a workin progress.

SMIL also provides SMIL Animation, a pack-age of animation constructs that authors canapply to other XML formats. SVG, for example,applies SMIL timing constructs to create elabo-rate animated graphics. Like XHTML+SMIL, thismix of SMIL constructs and direct XML-basedencoding of content offers an example of howflexibly SMIL 2.0’s constructs blend with otherXML syntax.

ConclusionSMIL 2.0’s release makes full-fledged multimediaaccessible to every user, author, and implementer,as well as to the Web infrastructure itself. SMIL isemerging not so much as a new class of presenta-tions and tools, but as a tool to make the existingWeb and its various interfaces more animated,informative, and accessible.

SMIL 2.0 is coming out now not just as an XMLsyntax, but also as a collection of readily availableproducts. Upcoming releases of RealPlayer andInternet Explorer will quickly put SMIL 2.0 play-

back capabilities on millions of computers world-wide. GRiNS, already released, plays 2.0 now andhelps build large-scale interactive multimedia forplayback on all these players. The next step is tosee what SMIL presentations media artisans create,and how they use the new power of SMIL 2.0 tochange the face of the Web as we know it.

AcknowledgmentsMy work on SMIL was funded in part by the MIA project in

Amsterdam. This article benefited from the valuable feedback

of Jacco van Ossenbruggen of CWI, Dick C.A. Bulterman and

Sjoerd Mullender of Oratrix, and Geoff Freed of WGBH. Por-

tions of the article were adapted from the forthcoming book,

SMIL: Interactive Multimedia on the Web.

Lloyd Rutledge is a researcher in multimedia and human-com-

puter interaction at CWI (Centrum voor Wiskunde en Infor-

matica) in Amsterdam, the Netherlands. His research inter-

ests include semantic annotation of stored media,

multimedia authoring, and semi-automatic generation of

hypermedia presentations. He is a member of the W3C

SYMM working group, which develops SMIL.

Readers can contact the author at Lloyd.Rutledge@cwi.nl

Get accessto individual IEEE Computer Society

documents online.

More than 57,000 articles

and conference papers available!

US$5 per article for members

US$10 for nonmembers

http://computer.org/publications/dlib/