Industrial IoT Authors: Pat Romanski, William Schmarzo, Elizabeth White, Stackify Blog, Yeshim Deniz

Related Topics: Industrial IoT

Industrial IoT: Article

Slide Show on the Web Using SMIL

Slide Show on the Web Using SMIL

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.

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:

<root-layout ... >
<!-- layout tags -->
<!-- media objects and synchronization tags -->

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 :

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

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.

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

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:

<img src="myphoto.gif" dur="5s" begin="3s" ... />
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).


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" />
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"/>
<img src="http://lsla.ccs.np.edu.sg/travel/japan1.gif" region="photo" />
<audio src="http://lsla.ccs.np.edu.sg/travel/narration1.wav" />
<img src="http://lsla.ccs.np.edu.sg/travel/japan2.gif" region="photo" />
<audio src="http://lsla.ccs.np.edu.sg/travel/narration2.wav" />
other photo images in the virtual tour collection named "Japan Delight"
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.

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.


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

More Stories By 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.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.

IoT & Smart Cities Stories
Moroccanoil®, the global leader in oil-infused beauty, is thrilled to announce the NEW Moroccanoil Color Depositing Masks, a collection of dual-benefit hair masks that deposit pure pigments while providing the treatment benefits of a deep conditioning mask. The collection consists of seven curated shades for commitment-free, beautifully-colored hair that looks and feels healthy.
The textured-hair category is inarguably the hottest in the haircare space today. This has been driven by the proliferation of founder brands started by curly and coily consumers and savvy consumers who increasingly want products specifically for their texture type. This trend is underscored by the latest insights from NaturallyCurly's 2018 TextureTrends report, released today. According to the 2018 TextureTrends Report, more than 80 percent of women with curly and coily hair say they purcha...
The textured-hair category is inarguably the hottest in the haircare space today. This has been driven by the proliferation of founder brands started by curly and coily consumers and savvy consumers who increasingly want products specifically for their texture type. This trend is underscored by the latest insights from NaturallyCurly's 2018 TextureTrends report, released today. According to the 2018 TextureTrends Report, more than 80 percent of women with curly and coily hair say they purcha...
We all love the many benefits of natural plant oils, used as a deap treatment before shampooing, at home or at the beach, but is there an all-in-one solution for everyday intensive nutrition and modern styling?I am passionate about the benefits of natural extracts with tried-and-tested results, which I have used to develop my own brand (lemon for its acid ph, wheat germ for its fortifying action…). I wanted a product which combined caring and styling effects, and which could be used after shampo...
The platform combines the strengths of Singtel's extensive, intelligent network capabilities with Microsoft's cloud expertise to create a unique solution that sets new standards for IoT applications," said Mr Diomedes Kastanis, Head of IoT at Singtel. "Our solution provides speed, transparency and flexibility, paving the way for a more pervasive use of IoT to accelerate enterprises' digitalisation efforts. AI-powered intelligent connectivity over Microsoft Azure will be the fastest connected pat...
There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering consumer-like user experience for support and operations. We have built the world’s first AI-driven IT / HR / Cloud / Customer Support and Operations solution.
Codete accelerates their clients growth through technological expertise and experience. Codite team works with organizations to meet the challenges that digitalization presents. Their clients include digital start-ups as well as established enterprises in the IT industry. To stay competitive in a highly innovative IT industry, strong R&D departments and bold spin-off initiatives is a must. Codete Data Science and Software Architects teams help corporate clients to stay up to date with the mod...
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...
Druva is the global leader in Cloud Data Protection and Management, delivering the industry's first data management-as-a-service solution that aggregates data from endpoints, servers and cloud applications and leverages the public cloud to offer a single pane of glass to enable data protection, governance and intelligence-dramatically increasing the availability and visibility of business critical information, while reducing the risk, cost and complexity of managing and protecting it. Druva's...
BMC has unmatched experience in IT management, supporting 92 of the Forbes Global 100, and earning recognition as an ITSM Gartner Magic Quadrant Leader for five years running. Our solutions offer speed, agility, and efficiency to tackle business challenges in the areas of service management, automation, operations, and the mainframe.