Synchronized
Multimedia Integration Language (SMIL)
Background
You should have a working knowledge of HTML in order for this resource to be helpful to you. However, SMIL is very straightforward and easy to understand, so even without HTML experience the functionality, elegance, simplicity, and value of SMIL should be evident.
Purpose
My report provides information about SMIL (Synchronized Multimedia Integration Language), a recently developed XML-based language used for the implementation of multimedia presentations. SMIL allows for the easy coordination and synchronization of separate multimedia elements into a seamless presentation. After reading my report, the user who is familiar with basic web authoring should be able to create basic multimedia presentations with SMIL.
Terms and Definitions
Key definitions for my discussion include:
1. multimedia: more than one concurrent presentation medium (for example, on CD-ROM or a Web site). Although still images are a different medium than text, multimedia is typically used to mean the combination of text, sound, and/or motion video.
2. HTML: the set of "markup" symbols or codes inserted in a file intended for display on a World Wide Web browser. The markup tells the Web browser how to display a Web page's words and images for the user. The individual markup codes are referred to as elements (but many people also refer to them as tags).
3. script: multimedia development programs use "script" to mean the sequence of instructions that you enter to indicate how a multimedia sequence of files will be presented (the sequence of images and sounds, their timing, and the possible results of user interaction).
4. XML: a flexible way to create common information formats and share both the format and the data on the World Wide Web, intranets, and elsewhere.
All definitions are from whatis.com `
"Synchronized
multimedia is becoming increasingly important on the Web. The SMIL
Recommendation will enable much-needed interoperability in this area" --Tim
Berners-Lee, W3C Director and Inventor of the World Wide Web
Synchronized Multimedia Intgration Language (SMIL, pronounced "smile") is an XML-based language used to create rich multimedia presentations. It effectively brings together elements from CD-ROM, interactive television, Web, and audio and video streaming technologies. All of the media elements in a SMIL presentation are referenced from the same SMIL file, making it very easy to control how the separate elements interact with each other. Before the advent of SMIL, web authors who wanted to create multimedia presentations had to rely on script-based languages like JavaScript to create web pages that seamlessly blended audio, video, images and text into one synchronized package. These elements had to be packaged and sent (or streamed) as a bundle, no single element of the presentation able to be manipulated or changed without affecting the other elements. Of course, all of the separate elements had to be stored in the same physical location. With SMIL, the media elements can stored in different locations and easily edited without affecting the other elements in the presentation. Presentations can even be generated on-the-fly from a database using Java servlets or CGI scripts.
1. Enables TV-Like Content -- authors can create presentations much like that of a TV newscast with video, audio, and static elements.
2. Enhances Web Experiences -- SMIL presentations will be easier to find on the Web, and retrieval will be more precise because SMIL is an XML-based language with the tags indicating the inherent structure of the presentation.
3. Improves Bandwidth Efficiency -- the third example below illustrates this feature of SMIL.
4. Eases Authorship -- SMIL is much easier to learn and edit than a scripting language like JavaScript.
5. Features Built-In Accessibility -- SMIL can be used to offer alternate forms of a presentation, like closed-captioning for the hearing impaired.
6. Aids Internationalization -- SMIL can also offer alternate forms of a presentation using different languages.
7. Integrates into Web Architecture -- SMIL makes use of URLs, CSS-based layout, HTML-based hyperlinking, and XMl-based syntax.
There a number of SMIL players available at this time, the most notable being the RealPlayer G2, which can play SMIL presentations along with its own Real files and other formats as well. Other players, such as GRiNS and SOJA do not support files in Real format.
Annotated Examples
Let’s take a look at just how easy it is to use SMIL to create rich multimedia presentations. The following examples should provide some insight into the simplicity of SMIL and the power that its various tags yield.
First, let’s look at the most basic SMIL layout:
<smil>
<head>
<meta
name="copyright" content="Your Name" />
<layout>
<!--
layout tags -->
</layout>
</head>
<body>
<!-- media and synchronization tags -->
</body>
</smil>
Notice how much SMIL looks like HTML. It is very easy to understand the functions of SMIL if you have some HTML authoring experience. However, it must be noted that SMIL is case-sensitive (all tags must be written in lower case). Also, because SMIL is an XML-based application, all tags must have an end tag (though some tags, like the meta tag, can simply end with a slash -- e.g. <meta/>).
Let's discuss the meaning of the tags we have seen in the above example (this is very simple stuff, but we should cover it before we move on to the more exciting tags). The <smil> tag indicates that this is a document written in SMIL. The <head> tag indicates information that describes the basic appearance and layout of the presentation, while the <body> tag indicates information about the different multimedia elements of the presentation and their placement and timing.
Now that we've seen how familiar SMIL looks, let's move quickly ahead to explore some of the more interesting and powerful tags of the language. The following example will highlight several of the more common SMIL tags used for the document's appearance and the synchronization and location of the separate media elements in the presentation.
<smil>
<head>
<layout>
<root-layout
width="300" height="200"
background-color="white"
/>
<region
id="inls191_icon" left="75" top="50" width="32"
height="32"
/>
<region
id="guru_icon" left="150" top="50" width="100"
height="30"
/>
</layout>
</head>
<body>
<seq>
<img
src="inls191_32x32.gif" alt="The inls191 icon"
region="inls191_icon"
dur="6s" />
<img
src="guru_100x30.gif" alt="The guru icon"
region="guru_icon"
dur="4s" begin="1s" />
</seq>
</body>
</smil>
So what does all of this mean? Let's start with the <layout> section contained within the <head> tag. The <root-layout> tag is used to specify the most basic information about appearance and layout for the presentation. First, the width, height, and background color is specified for the entire window that the presentation is going to take place in. The window in this example is 300 pixels high, 200 pixels wide, and has a white background.
Next, the <region> tag is used to indicate which multimedia elements are going to appear where in the presentation window. There are two elements in this example, one called "inls191_icon" and the other called "guru_icon." Measurements are then given in pixels from the upper left-hand corner of the presentation window to indicate the placement of these elements. The size of the elements is also indicated. "inls191_icon" is located 75 pixels from the top of the window and 50 pixels from the left side of the window, and is sized at 32x32 pixels. "guru_icon" is located 150 pixels from the top of the window and 50 pixels from the left side of the window, and is sized at 100x30 pixels.
Now that we know what the presentation window looks like, what elements are going to be included in the presentation, and where they are going to be located in the presentation window, let's move on to how the elements are going to be synchronized. The <seq> tag within the <body> section indicates how long the elements will be displayed and in what order, as well as what the actual filenames of the elements are. The file that will be displayed in the region named "inls191_icon" is "inls191_32x32.gif," while the file that will be displayed in the region named "guru_icon" is "guru_100x30.gif." The alternate names for the files are given (in case there is trouble with display).
Now comes the really interesting part. The <img dur> tag indicates how long the image will be displayed. In the case of "inls191_32x32.gif," the image will be displayed for 6 seconds, starting from the very beginning of the presentation (0 seconds). "guru_100x30.gif" will be displayed for 4 seconds, but not from the 0 second mark. The <img begin> tag indicates how many seconds from the end of the last image the next image is displayed. So, "guru_100x30.gif" will be displayed 1 second after "inls191_32x32.gif" ends, or at the 7 second mark, and will be displayed for 4 seconds. "inls191_32x32.gif" is displayed before "guru_100x30.gif" because the children of the <seq> tag appear in the order in which they are written in the SMIL document.
Finally, let's take a look at how SMIL can be used to easily conditionalize the content of the presentation to fit the needs of the end user without the use of scripts. Attributes of the presentation that could be tailored to the end user include connection speed, language of the user, and functions for users with disabilities (e.g. closed-captioning for hearing-impaired users). Below is an example of various connection speed options for a video presentation.
<smil>
<!--
head (skipped) -->
<body>
<switch>
<video
id="guru"
src=http://ils.unc.edu/~knupm/videos/video_highest
system-bitrate="56000"
/>
<video
id="guru"
src=http://ils.unc.edu/~knupm/videos/video_high
system-bitrate="33000"
/>
<video id="guru"
src=http://ils.unc.edu/~knupm/videos/video_good
system-bitrate="22000"
/>
<video id="guru"
src=http://ils.unc.edu/~knupm/videos/video_slow
system-bitrate="12000"
/>
<video
id="guru"
src=http://ils.unc.edu/~knupm/videos/video_snail
system-bitrate="8000"
/>
</switch>
</body>
<smil>
As we see here, the connection speeds of the end user can be taken into account before sending the multimedia element. The <switch> tag looks at its children in order and stops when it has found the value that matches that of the attribute of the user. In this example, a user who had a connection speed of 33000 would receive the file "video_high" after the <switch> tag had rejected the file for users with a connection speed of 56000.
http://www.w3j.com/6/s2.hoschka.html An early article by Philipp Hoschka on the need for synchronized multimedia on the web.
http://www.hotwired.com/webmonkey/98/23/index1a.html An excellent SMIL primer presented in an entertaining fashion. Includes a discussion of basic SMIL tags. This was the source for the example on conditionalizing content without scripts.
http://www.w3.org/Press/1998/SMIL-REC Press release of the World Wide Web Consortium’s Recommendation of SMIL 1.0.
http://www.real.com/devzone/library/creating/smil/faq.html Frequently Asked Questions About SMIL from RealNetworks, creators of the RealPlayer G2 which handles documents written in SMIL.
http://www.w3.org/1999/08/smil-pressrelease Press release from the World Wide Web Consortium about SMIL Boston, the next version of SMIL.
http://www.webtechniques.com/archives/1998/09/bouthillier/ Article by Larry Bouthillier from WebTechniques.com about SMIL.
http://www.helio.org/products/smil/tutorial/index.html Excellent tutorial for beginners. The first two examples in this report have been adapted from the HELIO SMIL Tutorial.
http://www.cwi.nl/SMIL/ Web page from the CWI (Centrum voor Wiskunde en Informatica), the National Research Institute for Mathematics and Computer Science in the Netherlands, provides links to SMIL sites and resources.
Maintainer: Matthew J. Knüppel, knupm@ils.unc.edu
Last updated: October 27, 1999