Scribd
Upload
691 views

SMIL Tutorial

This document provides an overview and tutorial of SMIL (Synchronized Multimedia Integration Language). SMIL is an HTML-like language used to create multimedia presentations integrating various media types such as audio, video, images and text. The document explains what SMIL is, how to write basic SMIL code, and how to use sequencing, timing and other elements to structure and control SMIL presentations. It also discusses playing SMIL files and embedding SMIL in HTML pages.

Uploaded by

api-19921804
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
691 views

SMIL Tutorial

This document provides an overview and tutorial of SMIL (Synchronized Multimedia Integration Language). SMIL is an HTML-like language used to create multimedia presentations integrating various media types such as audio, video, images and text. The document explains what SMIL is, how to write basic SMIL code, and how to use sequencing, timing and other elements to structure and control SMIL presentations. It also discusses playing SMIL files and embedding SMIL in HTML pages.

Uploaded by

api-19921804
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 11

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" />
<img src="image2.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">
<img src="image1.jpg" dur="3s" />
<img src="image2.jpg" dur="3s" />
</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>
<style>.t {behavior: url(#default#time2)}</style>
</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">
<style>.t {behavior: url(#default#time2)}</style>
</head>
<body>
<t:seq repeatCount="indefinite">
<img class="t" src="image1.jpg" dur="1s" />
<img class="t" src="image2.jpg" dur="1s" />
</t:seq>
</body>
</html>
Displaying a Sequence of TextExample<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
<?import namespace="t" implementation="#default#time2">
<style>.t {behavior: url(#default#time2)}</style>
</head>
<body>
<t:seq repeatCount="indefinite">
<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>
<?import namespace="t" implementation="#default#time2">
<style>.t {behavior: url(#default#time2)}</style>
</head>
<body>

5
<par>
<t:audio src="liar.wav" repeatCount="indefinite" type="wav" />
<t:seq repeatCount="indefinite">
<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>
<?import namespace="t" implementation="#default#time2">
<style>.t {behavior: url(#default#time2)}</style>
</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>
<?import namespace="t" implementation="#default#time2">
</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
<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
<?import namespace="t" implementation="#default#time2">
</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>
<style>.t {behavior: url(#default#time2)}</style>
</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>
<style>.t {behavior: url(#default#time2)}</style>
</head>
<body>

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


begin="3s" width="128" height="107" />

</body>
</html>

SMIL Sequences
• Displaying a sequence of images

<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
<?import namespace="t" implementation="#default#time2">
<style>.t {behavior: url(#default#time2)}</style>
</head>
<body>

<t:seq repeatCount="indefinite">
<img class="t" src="pic_keyb.jpg" dur="1s"

8
width="128" height="107" />
<img class="t" src="pic_http.jpg" dur="1s"
width="128" height="102" />
</t:seq>

</body>
</html>
• Displaying a sequence of texts
<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
<?import namespace="t" implementation="#default#time2">
<style>.t {behavior: url(#default#time2)}</style>
</head>
<body>

<t:seq repeatCount="indefinite">
<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
• Displaying things simultaneously
<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
<?import namespace="t" implementation="#default#time2">
<style>.t {behavior: url(#default#time2)}</style>
</head>
<body>

<t:par>

<t:seq repeatCount="indefinite">
<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>

<t:seq repeatCount="indefinite">
<img class="t" src="pic_keyb.jpg" dur="1s"
width="128" height="107" />
<img class="t" src="pic_http.jpg" dur="2s"
width="128" height="102" />
</t:seq>

</t:par>

</body>
</html>

SMIL Transitions
• Transition effect

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

9
<?import namespace="t" implementation="#default#time2">
<style>.t {behavior: url(#default#time2)}</style>
</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

• SMIL audio

<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
<?import namespace="t" implementation="#default#time2">
</head>
<body>

<t:audio
src="liar.wav"
repeatCount="indefinite"
type="wav" />

</body>
</html>
• SMIL video

<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
<?import namespace="t" implementation="#default#time2">
</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


Element Description Ver
<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


Element Description Ver
<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


Element Description Ver
<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

You might also like