SMIL Tutorial

SMIL Tutorial
SMIL is a language for describing audiovisual presentations.

This tutorial shows you how to create web-based multimedia presentations which integrate audio, video,
images, text or any other media type.
SMIL Introduction
SMIL is an HTML-like language for describing audiovisual presentations.
What You Should Already Know

Before you continue you should have a basic understanding of the following:
• HTML
• XHTML
• XML
• XML namespaces
What Is SMIL?
• SMIL stands for Synchronized Multimedia Integration Language
• SMIL is pronounced "smile"
• SMIL is a language for describing audiovisual presentations
• SMIL is easy to learn and understand
• SMIL is an HTML-like language
• SMIL is written in XML
• SMIL presentations can be written using a text-editor
• SMIL is a W3C recommendation
A Simplified SMIL Example

<smil>
<body>
<seq repeatCount="indefinite">
<img src="image1.jpg" dur="3s" />
</seq>
</body>
</smil>
From the example above you can see that SMIL is an HTML-like language that can be written using a
simple text-editor.
The <smil></smil> tags defines the SMIL document. A <body> element defines the body of the presentation.
A <seq> element defines a sequence to display. The repeatCount attribute defines an indefinite loop. Each
<img> element has a src attribute to define the image source and a dur attribute to define the duration of the
display.
What Can SMIL Do?

• SMIL can be used to create Internet or Intranet presentations
• SMIL can be used to create slide-show presentations
• SMIL has been described as the Internet answer to PowerPoint
• SMIL presentations can display multiple file types (text, video, audio...)
• SMIL presentations can display multiple files at the same time
• SMIL presentations can display files from multiple web servers
• SMIL presentations can contain links to other SMIL presentations
• SMIL presentations can contain control buttons (stop, start, next, ...)
• SMIL has functions for defining sequences and duration of elements
• SMIL has functions for defining position and visibility of elements
• SMIL is a W3C Recommendation
W3C has been developing SMIL since 1997, as a language for choreographing multimedia presentations
where audio, video, text and graphics are combined in real-time.
1
SMIL became a W3C Recommendation 15. June 1998.
SMIL Files
A SMIL file describes a multimedia presentation.
SMIL Files
A SMIL file contains all the information necessary to describe a multimedia presentation.
SMIL files are stored with the file extension .smil
A SMIL file contains the following:

• The layout of the presentation
• The timeline of the presentation
• The source of the multimedia elements
SMIL Markup
Since SMIL is based on XML, the tags are case sensitive. All SMIL tags requires lowercase letters.
A SMIL document must start with a <smil> tag and end with a </smil> closing tag. It may contain a <head>
element and must contain a <body> element.
The <head> element is used to store information about the presentation layout and other meta information.
The <body> element contains the media elements.

<smil>
<body>
<seq repeatCount="indefinite">
</seq>
</body>
</smil>
How to Play a SMIL File?

To view a SMIL presentation, you will need a SMIL player installed on your computer.
Apple's Quicktime player, Windows Media Player, and RealNetworks RealPlayer support SMIL.
It would be convenient to show SMIL files natively in web browser, eliminating the requirement of a separate
SMIL player or plug-in.
Microsoft's Internet Explorer has limited support for SMIL. The open-source Mozilla project is incorporating
SMIL, but the progress is slow.
Note: The rest of this tutorial uses IE 5.5 or later, to demonstrate SMIL.
SMIL in HTML
Internet Explorer can run SMIL presentations inside HTML files.
Running SMIL in IE
SMIL elements can be inserted into HTML files in Internet Explorer 5.5 or later.
• To use SMIL elements in your HTML pages, you must add a "time" namespace to recognize the
elements. To use SMIL attributes, you must define a "time" class. Here is how to do it:
• Add a time namespace to the <html> tag
• Add an <?import> element to import the "time" namespace
• Add a <style> element to define the class "time"
Example<html xmlns:time="urn:schemas-microsoft-com:time">
<head>
<?import namespace="time" implementation="#default#time2">
2
<style>.time {behavior: url(#default#time2)}</style>
</head>
You will see the full example in the next paragraph.
SMIL Example
To run a SMIL presentation in an HTML page, just add a prefix and a class attribute to the SMIL elements
Example
html xmlns:time="urn:schemas-microsoft-com:time">
<head>
<?import namespace="time" implementation="#default#time2">
<style>.time {behavior: url(#default#time2)}</style>
</head>
<body>
<time:seq repeatCount="indefinite">
<img class="time" src="image1.jpg" dur="3s" />
<img class="time" src="image2.jpg" dur="3s" />
</time:seq>
</body>
</html>
In the example above we have added class="time" to the <img> elements, and a "time" prefix to the SMIL
elements
The class and namespace do not have to be called "time". Any name will do.
XHTML+SMIL
Browsers will treat audio and video as easy as old browsers treat text and images.
HTML+TIME
In the previous chapter you saw Internet Explorer could display SMIL elements in HTML.
The history behind this is shortly as follows:

June 1998: SMIL 1.0 became a W3C Recommendation.
September 1998: Microsoft, Macromedia, Compaq/Digital and Digital Renaissance submitted HTML+TIME
to W3C as a proposal for adding SMIL 1.0 timing and synchronization support to HTML.
The HTML+TIME proposal describes very much the support for SMIL that can be found in IE 5.5.
XHTML+SMIL
August 2001: SMIL 2.0 became a W3C Recommendation. XHTML+SMIL became a separate Working Draft,
based on the ideas of HTML+TIME.
The XHTML+SMIL Working Draft describes very much the support for SMIL that can be found in IE 6.0.
What is Happening Here?

SMIL is currently in a very interesting development process.
SMIL 1.0 defined a simple way to create visual media presentations and how to play them.
HTML+TIME added SMIL 1.0 abilities to nearly all HTML elements.
SMIL 2.0 added interactivity and transitions to SMIL 1.0.
XHTML+SMIL adds SMIL 2.0 abilities to nearly all XHTML elements.
XHTML+SMIL has a great potential for taking the web to the next level, and let browsers treat audio and
video like "old" browsers treated text and images.
Why XHTML+SMIL?
Is it not obvious?
To run a SMIL presentation today, you'll need a SMIL player. Would it not be nicer if you could run SMIL
directly in your browser?
SMIL defines a set of multimedia elements. Each of these elements can be given layout, timing, and
transition attributes and rules. Would it not be nicer if you could add these attributes and rules to all your
HTML elements?
SMIL Timing
Timing is about when to begin and when to stop.
3
Timelines and Timing
Most SMIL element have timing attributes to define the timeline of the presentation.
Timing attributes defines the start time and the duration of an element.
The following table lists the possible time formats:
Format Examples
hh:mm:ss.f 1:50:00 (One hour and fifty minutes)

10:50 (Ten minutes and fifty seconds)
10.5 (Ten and a half second)
number 3.5h (Three and a half hour)

[h|min|s|ms] 3.5min (Three and a half minute)
3.5sec (Three and a half second)
35ms (Thirty-five milliseconds)
wallclock wallclock(2003-08-01T12:10:30+1.00)
(YYY-MM-DDThh:mm:ss+zone) (Ten minutes and thirty seconds past twelve,
August the first 2003, coordinated universal time
plus one hour)
The value "indefinite" can also be used to define never ending loops.
Duration
The duration (dur="5s") attribute of an element defines how long the element will be visible:
Example
<html>
<head>
<style>.t {behavior: url(#default#time2)}</style>
</head>
<body>
<img class="t" src="image1.jpg" dur="5s" />
</body> </html>
When To Begin?
The begin (begin="2s") defines when the element will be visible (start playing):Example<html>
<head>
</head>
<body>
<img class="t" src="image1.jpg" begin="2s" />
</body>
</html>
SMIL Sequence
seq - the most common SMIL element - defines a sequence.
The Sequence Element

The seq element defines a sequence. The children elements of the seq element are displayed in a
sequence, one after each other.
Use the <seq> tag to define a list of images to be displayed, a list of paragraphs, a list or videos, or any
other elements.
The seq element can have a number of attributes. The most common attributes are:
Attribute Value Description

begin time Sets the delay before the element
is displayed
4
dur time Sets the duration for the display
repeatCount number Sets the number of repetitions for
the display
Displaying a Sequence of Images

Example
<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
<?import namespace="t" implementation="#default#time2">
</head>
<body>
<t:seq repeatCount="indefinite">
</t:seq>
</body>
</html>
Displaying a Sequence of TextExample<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
</head>
<body>
<h2 class="t" dur="1s">I will display for one second</h2>
<h2 class="t" dur="2s">I will display for two seconds</h2>
<h2 class="t" dur="3s">I will display for three seconds</h2>
</t:seq>
</body>
</html>
SMIL in Parallel
Objects inside a par element will be played at the same time (in parallel).
The Parallel Element

The par element can have a number of attributes. The most common attributes are:
Attribute Value Description
begin time Sets the delay before the element
is displayed
dur time Sets the duration for the display
endsync "first"|"last"|id(clip) Synchronizes the stopping of
elements
repeatCount number Sets the number of repetitions for
the display
Synchronization
A parallel group of clips can be stopped at the same time using the endsync attribute in the <par> tag.
endsync="first" stops all the clips in the <par> group when the shortest clip are finished regardless of any
time parameters set for the other clips.
endsync="last" concludes the <par> group when all clips have finished playing. This is the default.
endsync="id(ID)" concludes the <par> group when the clip with the identified (ID) clip are finished. The ID is
referring to the value of the clips id attribute.
Displaying Objects in ParallelExample<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
</head>
<body>
5
<par>
<t:audio src="liar.wav" repeatCount="indefinite" type="wav" />
<h2 class="t" dur="1s">I will display for one second</h2>
<h2 class="t" dur="2s">I will display for two seconds</h2>
</t:seq>
</par>
</body>
</html>
SMIL Transitions
Transitions can generate effects like "fading" and "wiping" to elements.
Transitions in SMIL 2.0

Transitions are new in SMIL 2.0. Transitions are not a part of the SMIL 1.0 specification.
IE 6 support transitions based on the SMIL 2.0 specification.
Transitions are implemented with the element transitionfilter.
Attributes
The <transitionfilter> tag can have several attributes. The most common are:
Attribute Description Example
type Defines the type of transition filter type="clockWipe"
(see transition filter list)
begin Defines when the transition begin="0s"
should begin
mode Defines the transition mode mode="in"
from Defines the starting value of the from="0.2"
transition
to Defines the ending value of the to="0.8"
transition
Transition Filters
The following transition filters can be used:fade, barnDoorWipe, barWipe, clockWipe, ellipseWipe, fanWipe,
irisWipe, pushWipe, slideWipe, snakeWipe, spiralWipe, starWipe
Displaying Transitions
In the example below the image will be displayed for 4 seconds. The transition filter will use 2 second to
"clockWipe" the image into its place.Example<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
</head>
<body>
<t:transitionfilter targetelement="keyb" type="clockWipe"
begin="keyb.begin" dur="2s" />
<img id="keyb" class="t" src="pic_keyb.jpg" dur="4s"
width="128" height="107" />
</body>
</html>
SMIL Media Elements

SMIL uses media elements to describe content.
Media Elements
The following media elements can be used to include media objects in a SMIL document:
Element Description Ver
<animation> Defines an animation 1
6
<audio> Defines an audio clip 1
<brush> Defines a brush 1
<img> Defines an image 1
<param> Defines a parameter 1
<ref> Defines a generic media reference 1
<text> Defines a text 1
<textstream> Defines a texstream 1
<video> Defines a video 1
Media Attributes
Each media object in a SMIL document must be included using a reference (URL) in the src attribute. The
src attribute is the most commonly used attribute for media elements.
The type attribute is used to define the media type. If the type attribute is omitted the application should rely
on the type information communicated by the server. Developers should not rely on the file type extension to
define the file type.
Attribute Description Ver
erase Defines the behavior of the element after any timing is 1
complete
src Defines the source of a media object 1
type Defines the media type 1
The <animation> Element

The <animation> element defines a reference to an animation object stored as vector graphics or in another
animated format.
The <audio> Element

The <audio> element defines a reference to an audio object stored as recorded audio.Example<html
xmlns:t="urn:schemas-microsoft-com:time">
<head>
</head>
<body>
<t:audio src="liar.wav" repeatCount="indefinite" type="wav" />
</body>
</html>
The <brush> Element

The <brush> element defines a fill-color or fill-pattern.
The <img> Element

The <img> element defines a reference to an image object stored as JPG or an other image format.
Example: <img src="myimage.gif" type="GIF" />
The <param> Element

The <param> element defines a parameter to a media element.
Example: <param name="color" value="red" />
The <ref> Element

The <ref> element defines a reference to a generic media object.
The <ref> element can be used when the media type is not well defined.
The <text> Element

The <text> element defines a reference to a text object stored as text.
The <textstream> Element

The <textstream> element defines a reference to a text object stored as a text-stream.
The <video> Element

The <video> element defines a reference to a video object stored as recorded video
7
.Example
<head>
</head>
<body>
<t:video
src="http://www.ananova.com/about/vap_windows_check.wmv"
repeatCount="indefinite" type="wmv" />
</body>
</html>
SMIL Examples
How to Play a SMIL File?
To view a SMIL presentation, you will need a SMIL player installed on your computer.
Apple's Quicktime player, Windows Media Player, and RealNetworks RealPlayer support SMIL.
Microsoft's Internet Explorer has limited support for SMIL. The open-source Mozilla project is incorporating
SMIL, but the progress is slow.
Note: The examples below will use IE 5.5 or later to demonstrate SMIL.
SMIL Timing
• Specify how long an element should be visible
<html>
<head>
</head>
<body>
<img class="t" src="pic_keyb.jpg"

dur="3s" width="128" height="107" />
</body>
</html>
• Specify when the element should be visible

<html>
<head>
</head>
<body>
<img class="t" src="pic_keyb.jpg"

begin="3s" width="128" height="107" />
</body>
</html>
SMIL Sequences
• Displaying a sequence of images
<head>
</head>
<body>
<img class="t" src="pic_keyb.jpg" dur="1s"
8
<img class="t" src="pic_http.jpg" dur="1s"
</t:seq>
</body>
</html>
• Displaying a sequence of texts
<head>
</head>
<body>
<h2 class="t" dur="1s">
I will display for one second</h2>
I will display for two seconds</h2>
I will display for three seconds</h2>
</t:seq>
</body>
</html>
SMIL in Parallel
• Displaying things simultaneously
<head>
</head>
<body>
<t:par>
I will display for one second</h2>
I will display for two seconds</h2>
</t:seq>
<img class="t" src="pic_keyb.jpg" dur="1s"
<img class="t" src="pic_http.jpg" dur="2s"
</t:seq>
</t:par>
</body>
</html>
SMIL Transitions
• Transition effect
<head>
9
</head>
<body>
<t:transitionfilter targetelement="keyb"
type="clockWipe"
begin="keyb.begin"
dur="2s" />
<img id="keyb" class="t"

src="pic_keyb.jpg" dur="4s"
</body>
</html>
SMIL Media
• SMIL audio
<head>
</head>
<body>
<t:audio
src="liar.wav"
repeatCount="indefinite"
type="wav" />
</body>
</html>
• SMIL video
<head>
</head>
<body>
<t:audio src="http://www.ananova.com/about/vap_windows_check.wmv"
repeatCount="indefinite"
type="wmv" />
</body>
</html>
SMIL Reference
This is a complete SMIL 2.0 Reference (under construction).
SMIL Timing Elements

<excl> Defines elements to be displayed exclusively 2
<par> Defines elements to be displayed in parallel 1
<seq> Defines elements to be displayed in a sequence 1
SMIL Timing Attributes
10
Attribute Description Ver
begin Sets the delay before the element is displayed 1
dur Sets the duration for the display 1
endsync Synchronizes the stopping of parallel elements 1
repeatCount Sets the number of repetitions for the display 1
SMIL Media Elements

<animation> Defines an animation 1
<audio> Defines an audio clip 1
<brush> Defines a brush 1
<img> Defines an image 1
<param> Defines a parameter 1
<ref> Defines a generic media reference 1
<text> Defines a text 1
<textstream> Defines a textstream 1
<video> Defines a video 1
SMIL Structure Elements

<body> Defines the body of a SMIL document 1
<smil> Defines a SMIL document 1
By: DataIntegratedEntity
Source: http://w3schools.com/smil/default.asp
11

SMIL Tutorial

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

SMIL Tutorial

Uploaded by

Copyright:

Available Formats

SMIL Tutorial

SMIL is a language for describing audiovisual presentations.

What You Should Already Know

A Simplified SMIL Example

What Can SMIL Do?

A SMIL file contains the following:

The <body> element contains the media elements.

How to Play a SMIL File?

The history behind this is shortly as follows:

What is Happening Here?

hh:mm:ss.f 1:50:00 (One hour and fifty minutes)

number 3.5h (Three and a half hour)

The Sequence Element

Attribute Value Description

Displaying a Sequence of Images

The Parallel Element

Transitions in SMIL 2.0

SMIL Media Elements

The <animation> Element

The <audio> Element

The <brush> Element

The <img> Element

The <param> Element

The <ref> Element

The <text> Element

The <textstream> Element

The <video> Element

<img class="t" src="pic_keyb.jpg"

• Specify when the element should be visible

<img class="t" src="pic_keyb.jpg"

<img id="keyb" class="t"

SMIL Timing Elements

SMIL Timing Attributes

SMIL Media Elements

SMIL Structure Elements

You might also like