Introducing SMIL - Multimedia Presentation on a ShoeString

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:


<a show="new" href="index2.smi">    <img src="image.gif" region="reg1" dur="indefinite" />  </a>


<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.

Be sure to check out a feature-by-feature demo of SMIL possibilities at

You can find more information and resources on the current (SMIL 2.0), and past recommendations at


Category: software Time: 2002-10-31 Views: 0

Related post

  • Template or tool for creating single-page multimedia presentations? 2014-04-16

    Some examples I have in mind are: The next America, Pew Research A game of Sharks, The New York Times Recalling a Vision of the Future, The New York Times How would you create something like this with minimal effort? Is there a tool or a template? Wh

  • video presentation application for linux 2009-10-26

    I am looking for an application to create video presentations in linux. I have made one with the online service that i really like, but i am looking to make one with a little more control over it. For example i would like to control how t

  • Tools for presentation 2012-08-24

    I'd like to know a good tool for job presentation (an internship), actually PowerPoint is not good, so I want to change....I know prezi, is it good? Any other suggestions, thanks a lot!! --------------Solutions------------- If you want to get good re

  • Complete Guide To Hosting - Part 2 2002-04-28

    Last time, in Part 1 of this guide, we looked at assessing a potential host for your site using a checklist. Today, we get into the nitty gritty of the job: what factors should you include on your checklist? What are the aspects on which you want to

  • Interview - Kynn Bartlett 2002-03-13

    Kynn Bartlett wears many hats. He co-founded a successful Web design company; he is an author, an educator, and public speaker; and he's also a very witty person. Most of all though, Kynn is renowned for his expertise in Internet Accessibility. He ta

  • Practical Web Design - Speed Up Your Site 2003-05-02

    I guess I've always liked things simple: function over form, performance over aesthetics, and the like. When I was a wee lad, my dad and I entered the "Pinewood Derby" - a Cub Scouts-sponsored competition to see who could whittle the fastest rac

  • A Really, Really, Really Good Introduction to XML 2005-08-24

    In this chapter, we'll cover the basics of XML – essentially, most of the information you'll need to know to get a handle on this exciting technology. After we're done exploring some terminology and examples, we'll jump right in and start working wit

  • Create Animation with Fireworks Article 2002-04-01

    Multimedia-rich sites were once shunned on the Web. "No!" cried the nay-sayers. "You can't have rich and engaging media - it deters users and won't increase traffic." The bottom line, however, is that well-planned and judiciously-imple

  • Are free stock imagery usable in books and websites? 2009-08-12

    I see a lot of "free" stock imagery and vector graphics available on the Internet, but when I recommend such things for use on publications or websites, my clients ask me for printable licenses or any GPL/CreativeCommons declaration, but I find

  • What is the Flash Player performance bottleneck? Not CPU? 2011-04-14

    I'm planning a big multimedia presentation would like to know how to get the best framerate out of Flash Player. Currently, using this simple benchmark tool, the ultra-quality stage seems to drop the frame rate quite a bit and yet the CPU seems to be

  • What's "creation mode" in the Galaxy S's offical messaging application? 2011-09-03

    If you open the official messaging App, go to menu then settings, there is a setting "creation mode" which has the following options (in that order): restricted warning free What does this change? Is this documented somewhere? Note: I have trans

  • Dimension too large on a PNG figure under xelatex and beamer 2012-04-08

    I have PNG image I want to introduce into my presentation. The figure is black and white and the edges are small. When I compile the file in pdflatex everything is fine but when I Compile it with xelatex I get !dimension too large error: [1] <use "

  • Can I use my phone as a bluetooth game controller for my computer? 2012-05-06

    I've seen BT Controller but I think it only allows users to use their android as remote for other androids. I just want to use my phone as a bluetooth controller with up, down, left, right, L, R, start, select, A, B buttons for my computer. Is there

  • What are the practical uses of low speed continuous drive (shooting) mode? 2013-02-21

    The Canon 7D has two types of continuous shooting mode: High speed continuous and low speed continuous. What are the practical applications (scenarios, photography style, uses, etc) of using the low speed continuous mode? --------------Solutions-----

  • Tracking visualforce page usage 2013-07-30

    Is there a way to find out the users who have accessed a specific visualforce page? I think Google analytics is a way to do this(?),but I have not tracked down the page to monitor who accessed the page. Is there any out of the box/black box feature t

  • Is there any PowerPoint alternative? 2014-03-19

    This question already has an answer here: Light easy to use Presentation software 9 answers Is there any other software that can make PPT except libreoffice impress? [duplicate] 2 answers Is there any PowerPoint alternative? I'm not looking for just

  • Is there a way to open .et files with 14 04 LTS? 2015-02-25

    I have just come over to Ubuntu and I am very pleased with it. However I have a very important file that I backed up from windows and I am unable to open it. It is an a .et file created by Kingsoft spreadsheets. Is there a way to open this file? ----

  • How to deal with multi directional footnote language? 2015-07-08

    How to deal with multi directional footnote language? suppose I have a multilingual document whatever it is (word Document or an HTML file) and I have to include footnotes in that document in multi directional language as shown below. Do I have to fo

  • How to encourage client to do some in house QA testing? 2015-12-10

    Update/Clarification My client understands the need for their in-house testing and he/they always swears they will "do better" (i.e. do something) but it just doesn't happen. They don't have the budget for outside testing. I guess I am asking (v

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C), All Rights Reserved.

processed in 0.994 (s). 13 q(s)