A Question of Timing

August 2, 2000

Didier Martin

We are so used to HTML that, most of the time, the whole notion of a web browser is associated with HTML browsing. But outside of Microsoft or Netscape browsers there are alternatives, such as SMIL browsers, the most popular SMIL browser being the Real Audio G2 player.

SMIL browsers display movies and animations, and play sound tracks. All these media are time sensitive, and to render multimedia objects is also to synchronize their rendering.

Microsoft's recently released IE5.5 browser has some new synchronization capabilities. IE 5.5 supports a first version of the TIME module, a subset of the SMIL specification.

But before we look at TIME, what is SMIL?

The SMIL Rendering Language

SMIL (pronounced "smile") stands for Synchronized Multimedia Integration Language. And guess what? SMIL is a rendering language based on XML. It is, in fact, a two year old W3C Recommendation! Two main multimedia browsers can interpret SMIL documents:

  • The Apple QuickTime Viewer
  • The RealAudio G2 Viewer

These two are by far and away the most popular, having millions of copies installed.

A SMIL document's structure is similar to the HTML document structure. The root element is the <smil>, and contains two child elements:

  • The <head> element
  • The <body> element

As with HTML, each visual object in SMIL occupies a certain area of the browser's viewport, or display area. Thus, a SMIL browser's display area is divided into regions. Each region contains a media document such as streaming video, text, an image, etc. Any visual object is contained in a region.

SMIL page layout

Each region is specified in the <head> element. A particular region is identified in a SMIL document by the use of a <region> element. The region's Z-order, X-Y position, width, and height are defined respectively by the z-index, left, right, width, and height attributes. For example:

<region id="images" z-index="2" left="15" top="15" width="440" 

height="330" />

Notice that in the above expression we gave an ID to the region. This ID is used as a reference to this region in the rest of the document.

The <body> element contains elements that indicate to the SMIL interpreter what is to be rendered in the defined regions. Rendering of different components can occur either sequentially or in parallel. The sequential operations are marked by the <seq> element, and the parallel operations are marked by the <par> element. Consider the following expression:


    <img region="background" src="presenter_template_med.jpg"


    <img region="images" src="trainer_pix.rp?wallclock=Base"



This snippet instructs the SMIL interpreter to render two images simultaneously. The first image is to be rendered in the region named "background," already defined in the <head> element, and the second one in the region named "images," also previously defined in <head>. So the region's visual characteristics are defined in the <head> section, and the region content defined in the <body> section. This reflects the fact that a region may have different contents at different moments. A <par> or a <seq> element may contain media objects like images, video, audio, or animation objects: respectively identified by the <img>, <video> , <audio> and <animation> elements. The <par> and <seq> elements are called synchronization elements.

Synchronization Elements

The children of a <par> element can overlap in time. The <par> or the <seq> elements may include some attributes used to define the lifecycle of the contained children elements/objects. The begin attribute indicates to a SMIL interpreter when to display the group of elements contained in the <par> element. The end attribute indicates when the elements should be no longer displayed.

The children of <seq> elements are displayed in sequence. Again, the begin and end attributes specify the lifecycle of the contained elements.

Media Objects

Visual media objects like videos are displayed by the SMIL interpreter in a region. The region acts like a container, and the visual media object fills the whole container area. Over time, the same region may host different visual media objects. There are two categories of media objects:

  • Visual media objects like images, videos, animations
  • Aural media objects like audios.

Regions are mainly used to contain visual media objects

How to Create a SMIL Document

Well there's an obvious way, right? Pick the text editor of your choice, learn SMIL... ah, it doesn't necessarily have to be that hard. Recently, a new SMIL editor has appeared, and moreover, you can get a free copy of it from RealNetwork's web site. This editor, RealPresenter, takes a Powerpoint presentation and lets you add video and audio to your slide show presentation. The Powerpoint slides are transformed into GIF files, which can be displayed and synchronized with a sound track and video.

RealPresenter automatically creates for you a SMIL document that packages and synchronizes all the media elements into a coherent whole. However, some media objects are in a format proprietary to Real, and other SMIL browsers such as the Quicktime SMIL browser cannot decode these media object files. Thus, only the RealNetworks SMIL browser can properly interpret the produced media objects.

So, while the SMIL file is compliant with the W3C specifications, the produced media objects are proprietary to Real. But since the RealPlayer browser is installed on millions of PCs, there is a very high probability that a lot of people will be able to see your multimedia production.

For the fun of it, I created a multimedia presentation using SMIL with the RealPresenter package. Just click on the following link and see what this new breed of SMIL editor can produce: Real Presenter demo. You can use the "View->Clip Source" menu option in RealPlayer to see the source for the SMIL document.

What About IE 5.5 TIME?

Microsoft's IE 5.5 browser includes a useful new feature inspired by the SMIL specification: the time dimension. The HTML+TIME implementation is a first version of the SMIL "Boston" profile. SMIL Boston is a SMIL specification in which the SMIL features are defined as modules, and one or more modules can be included in other languages such as XHTML.

The Microsoft implementation is an early draft and will not necessarily be compliant with the final recommendations. But at least it can give us an idea of the potential, and offer an early preview of the time and synchronization capabilities offered by the SMIL Boston working draft.

Any object displayable in the browser's display area can have its lifecycle determined by the document's author. For instance, a paragraph may appear for only 5 seconds, or a floating frame may appear after 10 seconds. To add the time dimension to the HTML elements you have first to declare the namespace declaration in the <html> root element:

<html xmlns:t="urn:schema-microsoft-com:time">

Then, within the <style> element, declare the HTML+TIME version 2.0 behavior:


   .time { behavior: url(#default#TIME2); }


Third, immediately following the style element, add the declarations to import the TIME 2 behavior. Behaviors are also a current working draft, which you can find at the W3C site:

<?IMPORT namespace="t" implementation="#default#time2"?>

If you have already installed IE 5.5 on your PC, you may cut and paste the following example and see for yourself what happens.

<html xmlns:t="urn:schemas-microsoft-com:time">



         .time {behavior: url(#default#time2) }


      <?IMPORT namespace="t" implementation="#default#time2"?>



      <p class="time" begin="3" dur="5">This text will appear 

   after 3 seconds, then will disappear in five




The attributes begin and dur specify that the paragraph is to be displayed after 3 seconds, then its appearance on the browser's display area is limited to 5 seconds.

More information about Microsoft's SMIL Boston implementation can be found on their MSDN web site.

The SMIL Boston modules, and more particularly their implementation in mass market browsers, bring real multimedia capabilities to our published documents. For multimedia objects like movies, soundtracks, and animations, synchronization and object life cycle management are essential.

Until SMIL Boston is finalized and gets browser support, you can experiment with the RealPlayer browser and SMIL publishing tools (RealPresenter), or play with IE 5.5's early SMIL Boston implementation.