Slide Show on the Web Using SMIL

Feb. 4, 2001 12:00 AM

The explosive growth of multimedia on the Web has produced interactive applications with dynamic and rich content. The exponential evolution of the Web and the integration of various media, such as text, graphics, streaming video, audio, and animation, has created the need for interoperable or standard ways to describe the synchronization between the different media with temporal behavior.

In June 1998 the World Wide Web Consortium (W3C) released the Synchronized Multimedia Integration Language (SMIL: pronounced "smile") specification that represented a cross-industry effort to put multimedia presentation on the Web. The last call of the public working draft of SMIL 2.0 is available from the W3C site (www.w3.org). SMIL, just as its pronunciation suggests, has given a big welcome "SMILE" to all Web-based multimedia designers and developers. SMIL is an XML-based, vendor-neutral markup language that enables you to build interactive multimedia presentations by describing the layout, temporal behavior, and associated links with media presentation objects. The presentation, which is dynamic across timelines, can consist of text, image, audio, streaming video, or any other media data type.

In this article I explain in detail how to combine the power of SMIL, Active Server Pages (ASP), Open Database Connectivity (ODBC), and the back-end database to create a multimedia slide show on the Web. This allows end users to view the presentation (a virtual-tour slide show) in a dynamic manner with the necessary narration, background music, descriptions, and other relevant information. This prototype will be especially useful for travel portals or independent Web sites that provide travel-related services to Web users.

XML and SMIL
SMIL is an XML-based markup language that allows you to control the layout of your multimedia presentation (what and where the media objects are) as well as its synchronization and temporal relationship (i.e., when the media objects appear in the presentation in a concise way). In your presentation you can specify the precise layout of both the graphics and video objects with their respective captions and real-time narrations. You can even specify the media objects to appear in sequence or in parallel, or to be triggered by events. A number of SMIL players are available, such as Oratrix's GriNs, RealNetwork's RealPlayer, and Microsoft's Internet Explorer 5.5. In this article I use Oratrix's GriNs SMIL player for the multimedia slide show example.

In this section I briefly discuss some of the basic SMIL tags that will be used. You may refer to the W3C Web site for a list of comprehensive online tutorials.The following provides the outline of a SMIL document:

<smil>
<head>
<layout>
<root-layout ... >

...
</root-layout>
</layout>
</head>
<body>

...
</body>
</smil>

SMIL documents are easy to read and although they appear similar to HTML, they are quite different. Since SMIL is XML-based, it's case sensitive and all tags in the SMIL documents must end properly. For instance, an empty tag such as <img src = ... /> must be terminated properly.

The <head> element can contain meta and layout information. The <layout> element describes how elements in the document body are positioned. Under the layout you can specify several screen regions using a <region> tag that will be associated with the respective media objects in the <body> section as shown below :

...
<layout>
<root-layout width="400" height="500" background-color="black" />
<region id = ... />
<region id= ... />
...
</layout>

In the <body> section, you can specify the media objects, the sequence, and the timing of the media elements. <seq> and <par> are the two basic tags used to control the timing, as you'll see in the slide show example. Media objects referenced within <par> tags will play simultaneously, whereas <seq> tags enable media objects within the tags to be played in sequence.

<body>
...
<par>
<audio src= ... />
<img src= ... />
...
</par>

You may synchronize the media element (e.g., audio, streaming video, image graphics, and text) by using <seq> or <par>, or by adding a time parameter to media elements as shown in the following simple example:

...
<body>
<img src="myphoto.gif" dur="5s" begin="3s" ... />
</body>

The image "myphoto.gif" appears three seconds after the interpretation of the document begins and remains visible for another five seconds.

In this section I've discussed only some of the essential SMIL elements so we may proceed to discuss the multimedia slide show example. However, you may want to refer to www.w3.org/AudioVideo and www.w3.org/TR/2000/WD-smil20-20000921/ for detailed discussions or tutorials on SMIL.

Multimedia Slide Show on the Web
Internet use is expanding in all areas, and the marriage of multimedia and the Internet provides interactive, online multimedia delivery. The growing need for online multimedia delivery in many areas, such as education, training, presentation, entertainment, and business, via the Web pushes the Internet to its limit.

In this article I present a multimedia slide show example for the travel industry. Today, with the pervasive use of the Web and the growth of the travel industry, there are numerous travel portal Web sites, such as Microsoft Expedia, Yahoo! Travel, and Discovery Communications' travel channel as well as many individual or independent ones. These sites provide useful guides and interactive services for people planning holidays or business trips. Usually they provide information on flights, car rentals, hotel accommodations, land tour packages, travel guides, tools, and online reservations. Some of them even take that extra step and provide a virtual tour or gallery by using visual or textual information. It can be as simple as providing a description, static photographs, and a video for the countries or cities, or as sophisticated as providing panoramic images of a tour scene or real-time video streaming of a real-time captured tour scene.

In fact, a multimedia slide show is a simple and effective alternative for providing a virtual tour. You can view the scenery and tour photos in an animated manner - this includes the necessary narration that provides value-added services to the Web sites. A collection of logically grouped photographs in digital image formats (for instance, they can be grouped by destination cities and tour itineraries) are first captured by professional photographers. The images are then uploaded to the server. For this article the images and relevant information, such as background music, narration, and scenic descriptions, are stored in the back-end database using Microsoft Access. The details of the creation process of the travel data are beyond the scope of this article. For this purpose SMIL provides an easy and standardized way to describe the layout and temporal behavior between slides (e.g., how long the current slide will stay before proceeding to the next one) and build multimedia presentations on the Web.

A SMIL-Based Multimedia Slide Show Application
You may have one or more travel collections that include a text description, a cover page image, and an audio file to be played throughout the slide show as background music. Every collection can consist of one or more photos, each with an uploaded image file and optional audio narration to accompany the slide show (see Figure 1). In this article the Microsoft Access database is used for illustration purposes. In fact, the SMIL application discussed here will run with any ODBC-compliant database. There are two tables, collection and photo, to be accessed in the SMIL application. Figure 1 shows the fields defined in the tables. Upon execution of the virtual tour slide show, the audio file that corresponds to the collection will be played simultaneously as each image in the collection is displayed.

Figure 2 shows the anatomy of the virtual tour slide show SMIL application. slideshow.asp is the ASP script to be invoked at the server side. Upon execution it retrieves collection titles from the collection table, which is a Microsoft Access table. This allows you to choose your intended tour collection title. The ASP script makes use of the following two objects:

Active Database Object (ADO): This is used for an ODBC connection whereby a data source named travel is set up at the server side.
FileSystemObject: This is one of the objects contained in the Scripting Runtime library scrrun.dll that's used to create text files at the server side. In this case the name and description of the virtual tour's cover image of the selected travel collection is created in a separate HTML document, which is used as a <text> object in the SMIL output. Thus this HTML document is created on the fly based on the retrieved collection title.

Figure 3 shows a detailed four-stage explanation of the SMIL application, and Listing 1 shows the SMIL documents generated on the fly.

Stage 1
Upon entering the URL (http://lsla.ccs.np.edu.sg/travel/slideshow.asp), the URL request is sent to the server and the ASP script (slideshow.asp) is interpreted. Since this is the first invocation (the variable flag is not defined, see Listing 2), an ADO server object is created and a connection is established to Microsoft Access via ODBC using the data source name travel.

Stage 2
All the tour collection titles are retrieved from the collection table and a formatted HTML form, as shown in Figure 4, is sent back to the Web client so you can choose your tour collection for the slide show.

Stage 3
Upon selecting the tour collection title as shown in Figure 4, the HTTP request is forwarded to the server. The server creates an ADO server object to connect to the MS Access database again to retrieve the relevant information, such as image, audio, and text description, from the two tables, collection and photo.

Stage 4
The FileSystemObject object is used to create HTML documents for a text object of the cover image. These documents constitute the tour collection name, description, cover image file, and more. The ContentType of the response object must be set to application/smil (see Listing 2).

...
response.ContentType="application/smil"
...

Then the SMIL document (see Listing 1) is sent to the Web client. Upon receiving the SMIL document, the SMIL player (Oratrix's GriNs SMIL player is used here) is invoked. The MIME type must be set up properly in the client in order to invoke the respective SMIL player. Figure 5 shows the outcome of the slide show.

With reference to the SMIL document generated dynamically in Listing 1, two main regions are specified for the layout - "photo" and "caption." The "photo" region contains the image file, and the "caption" region contains the collection name, text description detail, and more.

...
<par dur="4s">
<img src="http://lsla.ccs.np.edu.sg/travel/japancover.jpg" region="photo" />
<text src="http://lsla.ccs.np.edu.sg/travel/1cover.html" region="caption" />
</par>
...

The above SMIL statements (from Listing 1) specify the cover image of the slide show. They include the cover image and an HTML text object that's created in Stage 4 (refer to the subprocedure outputcover in Listing 2). The cover slide that comprises the cover image and description as shown in Figure 5 will stay for four seconds before proceeding to the actual slide show.

<par endsync="first">
<audio src="http://lsla.ccs.np.edu.sg/travel/sakura.mid" dur="indefinite"/>
<seq>
<par>
<img src="http://lsla.ccs.np.edu.sg/travel/japan1.gif" region="photo" />
<audio src="http://lsla.ccs.np.edu.sg/travel/narration1.wav" />
</par>
<par>
<img src="http://lsla.ccs.np.edu.sg/travel/japan2.gif" region="photo" />
<audio src="http://lsla.ccs.np.edu.sg/travel/narration2.wav" />
</par>
...
other photo images in the virtual tour collection named "Japan Delight"
...
</seq>
</par>

The preceding code segments from Listing 1 show the <par> construct to group elements that are played in parallel (e.g., the background music and the photo images). The end of the slide show depends on the ending time of the first ending child element. Since the background music is running indefinitely, the first ending child element will be the nested child element in the <seq> construct that encloses the slide show of the individual image object.

Each slide consists of an image object and a corresponding audio object that's the accompanying narration. These two objects are enclosed in a <par> element and are running in parallel as shown in Figure 5. The duration of each slide depends on the accompanying narration time. For instance, the first slide will be displayed until the end of the narration before it transits to the next slide. The slide show will end when all the slides have been shown.

Conclusion
In this article I've discussed in detail a prototyped virtual tour slide show application using SMIL and ASPs. It's still in its infancy, and there's still room for improvement, such as providing a spatial subregion to facilitate a zooming effect and providing a different animation and transition effect. However, I've demonstrated the potential and feasibility of using SMIL for dynamic multimedia presentation on the Web. SMIL, as a declarative, XML-based timing and synchronization language, allows you to build interactive multimedia presentations. You can describe the temporal behavior, depict your presentation layout, and associate links with different media objects. SMIL 2.0 is now in its last-call working draft and will soon become a W3C Recommendation. In the future widespread implementation and adoption are expected with more SMIL-compliant browsers becoming available.

References

The World Wide Web Consortium: www.w3c.org
W3C user interface domain on synchronized multimedia: www.w3. org/AudioVideo
Last Call Public Working Draft of SMIL2.0: www.w3.org/TR/2000/ WD-smil20-20000921/
Oratrix GriNs SMIL player: www.oratrix.com/SMIL/index.html
RealNetwork RealPlayer: www.real.com/
Microsoft Internet Explorer 5.5: www.microsoft.com/windows/ ie/default.htm
Microsoft Expedia: www.expedia.com/
Yahoo! Travel: http://travel.yahoo.com
Discovery Communications' travel channel: http://travel.discovery. com/ecomm.html

Related Links

About Siet-Lang Lai
Siet-Leng Lai has published and presented at several international conferences, and is now conducting research into XML, WML and WAP. Since 1990 she has been a lecturer at the Center for Computer Studies, Ngee Ann Polytechnic, Singapore, on subjects ranging from operating systems, system programming, networking, Internet computing, and parallel and distributed computer systems to intelligent building. Lai has also conducted short courses for the public on the above- mentioned topics. She holds degrees from the National University of Singapore.