SMIL File
December 14, 1998
We've discussed the background of SMIL now let's look at the
how to produce a simple presentation. We're going to create
a presentation in which video is in the upper left corner, a
slide show of three graphics plays in the right corner and
under both of these is a text file that describes what is going
on in the pictures and video. Here is how the presentation will
be laid out and look in the Real Player.
Figure 1
The heart of the SMIL presentation is the SMI file. This file
describes how the presentation is laid out on the screen. In
our example it describes where the video, pix and text are placed
on the screen. It also tells the presentation where to look to
find the Real Video,
Real Pix and
Real Text files.
Let's take a look at the code for this file which is named
wdvl.smi
<smil>
<head>
<meta name="title" content="WDVL Demo" />
<meta name="author"
content="jrule@ruleweb.com" />
<meta name="copyright" content="©1998" />
<layout type="text/smil-basic-layout">
<region id = "VideoChannel"
title = "VideoChannel"
left = "0"
top = "0"
height = "120"
width = "160"
background-color = "#888888"
fit = "fill"/>
<region id = "PixChannel"
title = "PixChannel"
left = "160"
top = "0"
height = "120"
width = "160"
background-color = "#888888"
fit = "fill"/>
<region id = "TextChannel"
title = "TextChannel"
left = "0"
top = "120"
height = "50"
width = "320"
background-color = "#888888"
fit = "fill"/>
</layout>
</head>
<body>
<par title="multiplexor">
<video src = "wdvl.rm"
id = "Video"
region = "VideoChannel"
title = "Video"/>
<img src = "wdvl.rp"
id = "Headline Pix"
region = "PixChannel"
title = "Headline Pix"/>
<text src = "wdvl.rt"
id = "Ticker"
region = "TextChannel"
title = "Ticker"/>
</par>
</body>
</smil>
Remember that SMI files are written in XML. One trait of XML is
that instead of always having starting and ending tags such as
<b> and </b> tags may be terminated with
"/" before the closing bracket as seen in:
<text src = "wdvl.rt"
id = "Ticker"
region = "TextChannel"
title = "Ticker"/>
Much like an HTML file the SMIL starts with the opening
<SMIL>
tag and then the
<head> tag.
In the head of the
SMI file the META
tags describing the ownership, authorship and date of the SMI
file are defined. Additionally and more importantly the overall
layout
of the page is defined. The placement of the video, pix and
text are defined in a way similar to Cascading Style Sheets.
The placement is defined by giving coordinates for the upper
left corner of the element. Let's look at how the pix are
placed using the following line.
<region id = "PixChannel"
title = "PixChannel"
left = "160"
top = "0"
height = "120"
width = "160"
background-color = "#888888"
fit = "fill"/>
The region where the video will play is given a name,
"PixChannel" in this case and a title which is also
"PixChannel". The upper left corner of the Pix will
be 160 pixels from the left side of the playback area in the
Real Player and Zero pixels down from the top. If you look
back at Figure 1 you can see this placement. The video size
will be 120 pixels tall by 160 in width. The background color
of the region is set to the hexi-decimal color. The FIT determines
how the pix fits into its region. In this case it will grow to
fill the region no matter how large it was originally. In our
example the region and the images are both 160 pixels wide by
120 tall so they match without the need to grow or shrink.
The body of the SMI file links the layout of the page with the
source files such as RealPix, Real Video and the RealText. Let's
again look at how the RealPix files are tied in:
<img src = "wdvl.rp"
id = "Headline Pix"
region = "PixChannel"
title = "Headline Pix"/>
The source of the RealPix files are contained in another
file called wdvl.rp,
we'll talk about this file later. The image in the body is also
given a name in this case "Headline Pix", the region
is link to the area in the Layout section by using the
same name
"PixChannel".
It is important to give the layout area and the body area the
same name so that they are linked. A title is also given to
the area.
It should be noted that RealPix and RealText source files refer
to other text-based files that describe the pix and text. The
RealVideo files refer directly to the RealVideo encoded file.
We'll talk about the RealPix and RealText files below.
Notice that the RealVideo, RealPix and RealText files are
contained between two tags
<par> and
</par>.
This means that all the files contained in this area are
played in parallel. Other ways to play the files are possible,
but are beyond the scope of this article.
The SMI files is finally closed by closing the
</BODY> and
</SMIL>.
Introduction to SMIL
Introduction to SMIL
Real Pix Files
|
