A Question of Timing
by Didier Martin
August 02, 2000
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:
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.
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:
<par>
<img region="background" src="presenter_template_med.jpg"
fill="freeze"/>
<img region="images" src="trainer_pix.rp?wallclock=Base"
fill="freeze"/>
</par>
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:
<style>
.time { behavior: url(#default#TIME2); }
</style>
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: http://www.w3.org/TR/becss.
<?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">
<head>
<style>
.time {behavior: url(#default#time2) }
</style>
<?IMPORT namespace="t" implementation="#default#time2"?>
</head>
<body>
<p class="time" begin="3" dur="5">This text will appear
after 3 seconds, then will disappear in five
seconds</p>
</body>
</html>
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.