Introducing SMIL - Multimedia Presentation on a ShoeString
About the Author
Dan Morgan
Having graduated from university in 2003, Dan now works as a traffic mananger for an online sales house. Any spare time is spent developing his new venture, a Ski Review Website.
By: Dan Morgan
October 31st, 2002
Not every site owner or Web developer can afford Flash, Director or video editing or creation tools to integrate pictures, sound and video into their sites. Even PowerPoint might be out of your grasp. And, let's face it -- they're not the easiest tools to master, either. But what if you do have Notepad, and a range of sound, video or image files? What’s the answer? SMILE! Or: SMIL, to be precise.
What is SMIL?
SMIL stands for Synchronised Multimedia Integration Language, and is specified by the W3C.
What does it allow you to do? SMIL is an XML based mark-up language that allows you to combine separate images, sounds and video into a presentation. While it will not compete with Director or other similar products for high end functionality, the beauty of SMIL is that it’s easy. Very easy! If you had little or no trouble picking up HTML, then you'll probably master SMIL in an hour.
The SMIL Structure
SMIL is similar to HTML in that it’s split into a HEAD and a BODY section. However, one key difference here is that the basic spatial layout of the presentation is defined in the HEAD section, using regions. Then, content for those regions is added in the BODY section.
Take a look at the code below to see how these sections come together to form a document:
<smil>
<head>
<layout>
<region id="reg1" top="0" left="0" width="300" height="200" />
<region id="reg2" top="0" left="300" width="300" height="200" />
</layout>
</head>
<body>
<seq>
<par>
<img id="img1" src="image.gif" region="reg1" dur="4s" />
<audio id="aud1" src="audio.wav" dur="4s" />
</par>
<par>
<img id="img2" src="image2.gif" region="reg2" dur="4s" />
<audio id="aud2" src="audio2.wav" dur="4s" />
</par>
<img id="img3" src="finish.gif" region="reg1" dur="4s" />
</seq>
</body>
</smil>
As you can see, the spatial layout is clearly defined in the HEAD section, and then media formats are defined to fill different regions as defined by region Ids, though you don't need to define a region for sound files. You'll hopefully also have noticed:
- that the XHTML syntax is used to close all tags,
- the use of ‘dur’ attributes, and
- the use of the
<seq>and<par>tags.
The dur Tag
The dur tag stands for duration, allowing you to specify the number of seconds for which you want your media to be visible or audible. You should specify this as a numerical value, followed by s for seconds. Or, if you want your file to be displayed permanently, you can use the attribute indefinite.
The <seq> and <par> Tags
The <seq> and <par> tags stand for ‘sequential’ and ‘parallel’ respectively, and concern themselves with ordering your files at playback.
Having a <seq> tag at the beginning of your BODY section instructs the viewer to play back everything contained in the tag sequentially, so that one file will play until it finishes, after which the next will start. Using the <par> tag does the opposite -- it instructs all files contained within it to play at the same time.
However, SMIL gives you the ability to nest these tags, which allows you greater flexibility in controlling events. The way I've placed the <seq> and <par> tags in the example above means that an image will show concurrently with an audio file that plays for 4 seconds. Then, a second image will display, accompanied by a sound file, for 4 seconds. Finally an image will appear on its own for 4 seconds. So this will be a presentation of 12 seconds total duration, using 5 different files for a period of 4 seconds each.
A Modular Architecture
SMIL’s architecture is modular. It boasts a total of 45 different modules relating to various kinds of functionality, which are grouped into these functional areas:
- Structure
- Meta information
- Layout
- Timing
- Media Objects
- Linking
- Content control
- Animation
- Transitions
- Time Manipulations
This modular structure allows software manufacturers to include some or all modules in their products as required -- and allows standards initiatives to do the same. Hopefully you can appreciate the power of such a simple concept.
SMIL’s HTML Features
SMIL also incorporates many basic HTML features such as:
Linking
<a show="new" href="index2.smi">
<img src="image.gif" region="reg1" dur="indefinite" />
</a>
Text
<text src="text1.txt" region="reg1" dur="10s" />
That’s it! You are now ready to create! All you need is Notepad, a viewer to display your creation, and to save your files in the *.smi format. Happy Integrating!
Further Information
There are many players available, but a popular and widely-used option is Real One Player [1].
Be sure to check out a feature-by-feature demo of SMIL possibilities at http://www.realnetworks.com/resources/samples/smil.html [2]
You can find more information and resources on the current (SMIL 2.0), and past recommendations at http://www.w3.org/AudioVideo [3]
[1] http://www.realnetworks.com/solutions/leadership/realone.html
[2] http://www.realnetworks.com/resources/samples/smil.html
[3] http://www.w3.org/AudioVideo