SMIL Language Tutorial
11 Pages
English
Downloading requires you to have access to the YouScribe library
Learn all about the services we offer

SMIL Language Tutorial

-

Downloading requires you to have access to the YouScribe library
Learn all about the services we offer
11 Pages
English

Description

1I.As the Web has grown in usage from millions to tens of millions over the past three years, contentproviders and web audiences have come to appreciate and value the impact multimedia can have oncreating richer experiences.The markup language standard that defined the Web, HTML, had its origin in enabling the compositionand presentation of static media (text, images). In January 1997, the W3C sought to work with membersof the Internet community to define a markup language that would be specifically designed to address theunique requirements of dynamic media, and usher in the next wave of dynamic web content.SMIL is a proposed standard that unlocks the potential of the Web to synchronize a wide range of time-based multimedia and combine them all in a single presentation.SMIL is a simple but powerful XML compliant, mark-up language that coordinates when and howmultimedia files play. A SMIL file (file extension .smi) can be created with any text editor or wordprocessor than saves output as plain text with line breaks. Users familiar with HTML markup will pickup SMIL quickly. An example of a simple SMIL file that lists multiple media files played in sequence is 1. SMIL General Rulesfile, keep the following general XML-compliant syntax rules in mind:1. and TagThe SMIL file must start with a tag and end with the closing tag. All other mark-up … all ...

Subjects

Informations

Published by
Reads 23
Language English

Exrait

Cwu
Page
1
04/08/98
SMIL Language Tutorial
I.
Introduction
As the Web has grown in usage from millions to tens of millions over the past three years, content
providers and web audiences have come to appreciate and value the impact multimedia can have on
creating richer experiences.
The markup language standard that defined the Web, HTML, had its origin in enabling the composition
and presentation of static media (text, images).
In January 1997, the W3C sought to work with members
of the Internet community to define a markup language that would be specifically designed to address the
unique requirements of dynamic media, and usher in the next wave of dynamic web content.
SMIL is a proposed standard that unlocks the potential of the Web to synchronize a wide range of time-
based multimedia and combine them all in a single presentation.
II.
Creating a SMIL file
SMIL is a simple but powerful XML compliant, mark-up language that coordinates when and how
multimedia files play.
A SMIL file (file extension .smi) can be created with any text editor or word
processor than saves output as plain text with line breaks.
Users familiar with HTML markup will pick
up SMIL quickly.
An example of a simple SMIL file that lists multiple media files played in sequence is
shown below.
<smil>
<audio src="http://server.company.com/song.asf"/>
<video src="http://server.company.com/video1.rv"/>
<video src="http://server.company.com/video2.mov"/>
</smil>
1.
SMIL General Rules
SMIL has many similarities to HTML, but also some important differences. When you create your SMIL
file, keep the following general XML-compliant syntax rules in mind:
1.
<smil> and </smil> Tag
The SMIL file must start with a <smil> tag and end with the </smil> closing tag.
All other mark-up
appears between these two tags:
<smil>
… all other SMIL mark-up …
</smil>
2.
SMIL tags and attributes must all be lowercase.
A tag that does not have a corresponding end tag (for example, the <smil> tag has the end tag </smil>),
must close with a forward slash.
For example:
<audio src="first.wav"/>
Cwu
Page
2
04/08/98
3.
Attribute values, such as "first.wav" shown above, must be enclosed in double quotation marks.
4.
As in HTML, comments can be added to a SMIL file like this:
<!-- This is a comment -->
III. Structure of a SMIL file
2.
Header Section
The SMIL file can have a header section that defines aspects of the entire presentation, such as its title:
<smil>
<head>
...all header information...
</head>
<body>
...all body information...
</body>
</smil>
If you use a <head> tag, you must also use a <body> tag to define the remainder of the file.
1.
Header Information
In the SMIL file header, you typically provide author, title, and copyright information that shows up in the
multimedia presentation status panel. To do this, you use <meta> tags that have name and content
attributes as shown here:
<head>
<meta name="author" content="Jane Morales"/>
<meta name="title" content="Multimedia My Way"/>
<meta name="copyright" content="(c)1998 Jane Morales"/>
</head>
Alternately, you can simply include the <title> tag to add just a title:
<head>
<title>Multimedia My Way</title>
</head>
Within the body, you can override header elements as needed:
<head>
<meta name="title" content="Multimedia My Way"/>
</head>
<body>
<video src="first.rm"/>
<video src="second.rm"/>
<meta name="title" content="Planning is the Key"/>
</body>
Cwu
Page
3
04/08/98
When the second file in the example above plays, the title shown in the multimedia presentation changes
from "Multimedia My Way" to "Planning is the Key."
3.
Specifying Source Media File Locations
The source media file in a multimedia presentation is specified in a SMIL file with the SMIL <src> tag,
which describes the source media file type and location:
<audio src="http://server.company.com/audio/first.snd"/>
The first part of this tag specifies the type of source media file:
1.
audio
Use "audio" for any type of audio file.
For example, RealAudio, WAV, SND, AIFF, or AU
2.
video
Specify "video" for any type of video file. For example, RealVideo, AVI, QuickTime MOV, MPEG.
The
“video”
SMIL source tag can be used for animation, VRML, or other files that show continuous, video-
style motion.
3.
image
Use "image" for still images such as GIFs or JPEGs.
4.
text
Use "text" for simple text files or streaming text files.
5.
ref
Specify "ref" for any other file type, such as a multimedia synchronization file.
Following the file type, the
src
attribute lists the file location.
4.
Linking to Files on a Server
When a multimedia presentation streams over a network, the media source files reside on a server. Each
src attribute in the SMIL file provides a URL to a media file:
src="http://webserver.company.com:6060/audio/first.ra"
This URL breaks down into the following parts:
http://
This designates the server's streaming protocol.
webserver.company.com
The address varies for each Web server. Instead of a name, it may use a TCP/IP address such as
172.2.16.230.
/audio/
The Web server administrator sets up the directory structure, which may be more than one level deep as
shown in this example.
first.ra
This is the chosen src file name.
In this case, a RealAudio file called “first.ra”
Cwu
Page
4
04/08/98
IV.
Using Relative URLs
If the SMIL presentation includes many src files that are on the same server, each URL can be relative to a
base target defined in the SMIL header:
<head>
<meta name="base" content="http://server.company.com/">
</head>
<body>
<audio src="audio/first.wav"/>
<video src="video/first.mov"/>
<audio src="http://server.company.com/audio/second.snd"/>
</body>
Because the third file has a full URL specified for it, the base target is ignored. For the first two files,
however, the src values are appended to the base target, effectively giving the files these URLs:
http://server.company.com/audio/first.wav
http://server.company.com/video/first.mov
The relative syntax for SMIL files works exactly like relative links in HTML. Additional information
about SMIL relative src syntax can be found in an HTML reference.
V.
Linking to Local Files
If the SMIL presentation source files reside on the user's local computer (as with a multimedia tutorial
included with a software application, for example) include the SMIL file locally as well. The
src
attributes
in the SMIL file list presentation files in this format:
src="file://audio/first.ra"
This example is a local, relative link to a file that resides one level below the SMIL file in the audio
directory.
For local access, you typically want to use relative links because you cannot be sure where users
will place files on their machine.
Alternately, absolute, local links can be used to specify exact locations.
The syntax for absolute links is the same as with HTML.
Warning:
For local SMIL files, Microsoft Internet Explorer 3.0 does not recognize <head> and <title>, and it tries
to display the files as HTML. To support this browser, omit the <head> and <title> tags. This problem
does not occur with Netscape Navigator or Internet Explorer 4.0. Nor does it occur when you stream files
from RealServer to Internet Explorer 3.0.
VI.
Organizing a Presentation
SMIL allows Web authors to specify how and when each clip plays. The following sections explain how to
play files in sequence or parallel, as well as how to add timing information to fine-tune the presentation.
VII.
Playing Files in Sequence
Cwu
Page
5
04/08/98
To play clips in sequence, use the <seq> (“sequence”) SMIL tag. In the following example, the second
clip begins when the first clip finishes.
<seq>
<audio src="audio/newsong.wav"/>
<audio src="audio/oldsong.asf"/>
</seq>
VIII.
Playing Files Simultaneously
Two or more clips can be played at the same time by using the <par> ("parallel") SMIL tag.
For example,
the following plays a synchronized group of WAV, MOV, and AAF clips:
<par>
<audio src="audio/newsong.wav"/>
<video src="video/newsong.mov"/>
<ref src="lyrics/newsong.asf"/>
</par>
IX.
Specifying Delay, Start, and End Times
An offset for when a clip starts and how long it plays by specifying delay, clip start, and clip end times as
described below. These time elements use the format:
hh:mm:ss.xy
where hh is hours, mm is minutes, ss is seconds, x is tenths of seconds, and y is hundredths of seconds.
For example, a value of "20s" means 20 seconds.
X.
Setting Delay Times
A delay attribute like the following can be used to specify starting a clip at a specific point within the
presentation timeline:
delay="20.5s"
In a <par> grouping, this delays the start of the clip by 20.5 seconds. In a <seq> grouping, this adds 20.5
seconds of blank time between clips. The delay attribute works for images, audio, video, or any other file
type.
XI.
Setting Clip-begin and Clip-end Times
Clip start and clip end attributes such as the following specify the clip's internal timing mark where
playback begins and ends:
clip-begin="10.5s" clip-end="50.7s"
In this example, the clip starts playing at its internal 10.5-second mark rather than at its normal
beginning. It stops playing when it reaches its 50.7-second mark, playing for a total of 40.2 seconds.
Cwu
Page
6
04/08/98
1.
Start and End Times for Images
If you specify a start and end time for a clip that does not have an internal timeline (such as a graphic),
the times control how long the file appears in the presentation timeline. Applying a clip-begin time of
10.5 and a clip-end time of 50.7 to a graphic image, for example, makes the image appear 10.5 seconds
after the presentation begins. So the start time in this case works like a "delay." The graphic then
disappears 50.7 seconds into the presentation.
Example
The following example shows two audio files with different timing options:
<par>
<audio src="song1.snd" clip_begin="30.4s" clip-end="60.4s"/>
<audio src="song2.ra" delay="28" clip_begin="2.4s" clip-end="13.7s">
</par>
The timing options modify the <par> tag so that the two clips start at different times. The first clip begins
to play immediately, but starts at 30.4 seconds into its timeline. Because it ends at 60.4 seconds into its
timeline, this clip plays for exactly 30 seconds.
The second clip is delayed for 28 seconds. That means it
overlaps the first clip by 2 seconds. It starts at 2.4 seconds into its timeline and ends at 13.7 seconds into
its timeline, thus playing for 11.3 seconds. The total length of this group presentation is 30 seconds for the
first clip, plus 11.3 seconds for the second clip, minus the 2 second overlap: 39.3 seconds.
XII.Combining <seq> and <par> Tags
<seq> and <par> tags can be combined and nested as needed.
Note that the organization of these tags
greatly affects the presentation playback.
<seq>
file 1
<par>
file 2
file 3
</par>
file 4
</seq>
In the example above, file 1 plays first. When file 1 finishes, file 2 and file 3 play together. When both file
2 and file 3 have finished, file 4 plays. Very different results, though, occur if the <seq> and <par>
groupings are switched:
<par>
file 1
<seq>
file 2
file 3
</seq>
file 4
</par>
Cwu
Page
7
04/08/98
In the example, file 1, file 2, and file 4 all begin at the same time. When file 2 finished, file 3 starts. The
following figure illustrates the difference between these different groupings.
XIII.
Switching Between Alternate Choices
With the <switch> SMIL tag, authors can specify multiple options for presentation to the viewer:
<switch>
<type src="location1" trigger="value1"/>
<type src="location2" trigger="value2"/>
</switch>
The <switch> tag specifies any number of choices. The multimedia presentation will be presented based
on the first condition that meets the trigger.
If the trigger is system-language for example, each switch
statement lists the location of a file for a different language. The SMIL file then chooses a file according
to its language preference setting.
2.
Switching Between Languages
SMIL supports many languages, such as:
Language Trigger Value:
English
en
French
fr
German
gr
Japanese
jp
The following example shows a video slide show with separate audio narrations in English, French, and
German. Based on its language preference and the system-language value in the SMIL file, RealPlayer
determines which file to play:
<par>
<video src="http://server.company.com/slides/seattle.mov"/>
<!--select audio based on language-->
<switch>
<audio src="english/seattle.wav" system-language="en"/>
<audio src="french/seattle.wav" system-language="fr"/>
<audio src="german/seattle.wav" system-language="gr"/>
</switch>
</par>
XIV.
Switching Between Bit Rates
To take advantage of high bandwidth connections available to some users, authors can encode different
versions of media files for different bit rates. The <switch> SMIL tag can be used to define the choices
Cwu
Page
8
04/08/98
client can make based on its available bandwidth.
As shown below, you group files with <par> tags,
using the system-bitrate attribute to list the approximate bandwidth (in Kbps) each group consumes:
<switch>
<par system-bitrate=75000>
<!--for dual isdn and faster-->
<audio src="audio/newsong1.snd"/>
<video src="video/newsong1.avi"/>
<image src="lyrics/newsong1.gif"/>
</par>
<par system-bitrate=47000>
<!--for single isdn-->
<audio src="audio/newsong2.snd"/>
<video src="video/newsong2.avi"/>
<image src="lyrics/newsong2.gif"/>
</par>
<par system-bitrate=20000>
<!--for 28.8 modems-->
<audio src="audio/newsong3.snd"/>
<video src="video/newsong3.avi"/>
<image src="lyrics/newsong3.gif"/>
</par>
</switch>
Always list system bit rate options from highest to lowest.
SMIL ptions will be evaluated in the order
listed.
The first viable option that meets the trigger condition will be selected, even if subsequent options
suit it better. So if the 28.8 Kbps option is first, a SMIL client with a dual-ISDN connection will choose it
because it is the first viable option listed.
Also make sure that the last option satisfies the lowest bit rate connection you want to support. If
an
option not suitable for 28.8 Kbps modems is listed, for example, clients connected through those modems
will not be able to play the presentation.
XV.Laying Out Multiple Clips
When a SMIL presentation displays several clips at a time, separate playback areas ("regions") can be
defined through the <layout> tag.
In the SMIL file header, the <region id> tag is used to name each area
and define its location within the main SMIL prsentation. In the SMIL file body, region attributes are used
to specify which media source files play in which areas.
3.
Defining the Layout
Separate SMIL layout windows can be layed out using a a simple coordinate system measured across and
down (in pixels) from the top, left-hand corner.
Offset measurements are in pixels, with zero pixels as the
default.
<head>
<layout>
<region id="videoregion" left="103" top="20" height="180" width="240"/>
<region id="textregion" left="103" top="200"/>
</layout>
</head>
Cwu
Page
9
04/08/98
In this example, the <region> tags create two areas called "videoregion." and "textregion." Both areas are
offset from the left-hand edge of the main RealPlayer window by 103 pixels. The video region displays at
the top of the window, but the text region is 200 pixels down. (Because zero (0) pixels is the default, you
get the same result without the video region's "top" attribute.)
Note that the video region also specifies a
height and width in pixels. This constrains the video clip to those dimensions regardless of the clip's
encoded size. (Clipping occurs if the encoded video is larger than the region.) When no height and width
are given, as with the text region, the clip displays at its normal, encoded size.
XVI.
Adding a Background Color
You can specify background colors for each region in a SMIL layout:
<head>
<layout>
<region id="videoregion" background-color="aqua".../>
<region id="textregion" background-color="#C2EBD7".../>
</layout>
</head>
When a region clip is active, it overlays and hides the background color. The color shows through,
however, if the clip contains transparency. For the color value, you can use any Red/Green/Blue
hexadecimal value (#RRGGBB) supported by HTML, as well as one of the following predefined color
names, listed here with their corresponding hexadecimal values:
white (#FFFFFF)
silver (#C0C0C0)
gray (#808080)
black (#000000)
yellow (#FFFF00)
fuschia (#FF00FF)
red (#FF0000)
maroon (#800000)
lime (#00FF00)
olive (#808000)
green (#008000)
purple (#800080)
aqua (#00FFFF)
teal (#008080)
blue (#0000FF)
navy (#000080)
XVII. Overlapping Clips
If regions overlap, SMIL defines which regions appear in front with the z-index attribute. The following
example creates a region for a background image and an overlapping video:
<head>
<layout>
<region id="videoregion" left="30" top="20" z-index="1"/>
<region id="background" z-index="0"/>
</layout>
Cwu
Page
10
04/08/98
</head>
Here the background region is for a large image that fills the entire SMIL presentation. Its z-index of zero
means it always displays furthest to the back. The video, which overlaps the graphic, appears on top
because its region has a higher z-index value. Another element overlapping the video could be in a region
with a z-index of 2 (or 5, or 8, or 29) and thus appear in front of the video.
Here are pointers to observe when using the z-index:
The z-index values start at 0 (zero) and proceed through the positive integers without limit. ( No
negative value such as -4.)
The default value of 0 (zero) applies if you don't specify the z-index.
Using strictly sequential values such as 0, 1, 2, 3, 4 helps you keep track of the layers, but is not
necessary. A sequence such as 0, 1, 6, 19, 34 works just as well. And leaving gaps in the sequence makes
it easier to insert layers later.
Nonoverlapping clips can have the same z-index values. Side-by-side videos can both have a z-index
of 3, for example
When overlapping clips (say, clip A and clip B) have the same z-index, the following rules determine
which clip appears in front:
If clip B starts later in the presentation than clip A, it appears in front of clip A.
If both clips start at the same time, the clip listed later in the SMIL file appears in front.
XVIII. Assigning Clips to Regions
After you define the layout in the header section, you use region attributes within the source tags to attach
each source to a region:
<body>
<par>
<video src="video.avi" region="videoregion"/>
<audio src="audio.asf"/>
<image src="image.gif" region="imageregion"/>
</par>
</body>
In the example above, the video and image sources are assigned to the video and image regions defined in
the header. Audio files are not assigned to regions because audio streams do not have visual components
that require display areas.
XIX.
SMIL Layout Example
The following SMIL layout example displays three regions: a news region, a video region, and a stock
ticker region. The news and video regions are arranged side by side at the top of the main SMIL
presentation. The stock ticker region appears below them.
Dimensions:
Cwu
Page
11
04/08/98
Video: 176w x 144h
Text: 176w x 144h
Ticker Text: 352w x 30h
The SMIL file (.smi) to layout this broadcast news presentation is shown below:
<smil>
<head>
<layout>
<region id="textchannel1" left="0" top="0" height="144" width="176"/>
<region id="videochannel" left="176" top="0" height="144" width="176"/>
<region id="textchannel2" left="0" top="144" height="30" width="352"/>
</layout>
</head>
<body>
<par>
<text
id="text1"
src="text.txt" region="textchannel1"/>
<video id="video1" src="video.MOV" region="videochannel"/>
<text
id="text2"
src="ticker.txt" region="textchannel2"/>
</par>
</body>
</smil>