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 IntroductionSMIL is an HTML-like language for describing audiovisual presentations.

What You Should Already KnowBefore 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.

SMIL became a W3C Recommendation 15. June 1998.

1

SMIL FilesA SMIL file describes a multimedia presentation.

SMIL FilesA 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 MarkupSince 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 HTMLInternet Explorer can run SMIL presentations inside HTML files.

Running SMIL in IESMIL 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"><style>.time {behavior: url(#default#time2)}</style></head>You will see the full example in the next paragraph.

2

SMIL ExampleTo run a SMIL presentation in an HTML page, just add a prefix and a class attribute to the SMIL elements

Examplehtml 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+SMILBrowsers will treat audio and video as easy as old browsers treat text and images.

HTML+TIMEIn 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+SMILAugust 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 TimingTiming is about when to begin and when to stop.

Timelines and Timing

3

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[h|min|s|ms]

3.5h (Three and a half hour)3.5min (Three and a half minute)3.5sec (Three and a half second)35ms (Thirty-five milliseconds)

wallclock(YYY-MM-DDThh:mm:ss+zone)

wallclock(2003-08-01T12:10:30+1.00)(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.

DurationThe 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 Sequenceseq - the most common SMIL element - defines a sequence.

The Sequence ElementThe 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 Descriptionbegin time Sets the delay before the element

is displayeddur time Sets the duration for the displayrepeatCount number Sets the number of repetitions for

the display

4

Displaying a Sequence of ImagesExample<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 ParallelObjects inside a par element will be played at the same time (in parallel).

The Parallel ElementThe par element can have a number of attributes. The most common attributes are:Attribute Value Descriptionbegin time Sets the delay before the element

is displayeddur time Sets the duration for the displayendsync "first"|"last"|id(clip) Synchronizes the stopping of

elementsrepeatCount 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>

<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>

5

<h2 class="t" dur="2s">I will display for two seconds</h2> </t:seq></par></body></html>

SMIL TransitionsTransitions can generate effects like "fading" and "wiping" to elements.

Transitions in SMIL 2.0Transitions 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.

AttributesThe <transitionfilter> tag can have several attributes. The most common are:Attribute Description Exampletype Defines the type of transition filter

(see transition filter list)type="clockWipe"

begin Defines when the transition should begin

begin="0s"

mode Defines the transition mode mode="in"from Defines the starting value of the

transitionfrom="0.2"

to Defines the ending value of the transition

to="0.8"

Transition FiltersThe following transition filters can be used:fade, barnDoorWipe, barWipe, clockWipe, ellipseWipe, fanWipe, irisWipe, pushWipe, slideWipe, snakeWipe, spiralWipe, starWipe

Displaying TransitionsIn 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 ElementsSMIL uses media elements to describe content.

Media ElementsThe following media elements can be used to include media objects in a SMIL document: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

6

<text> Defines a text 1<textstream> Defines a texstream 1<video> Defines a video 1

Media AttributesEach 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 Vererase Defines the behavior of the element after any timing is

complete1

src Defines the source of a media object 1type Defines the media type 1

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

The <audio> ElementThe <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> ElementThe <brush> element defines a fill-color or fill-pattern.

The <img> ElementThe <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> ElementThe <param> element defines a parameter to a media element.Example: <param name="color" value="red" />

The <ref> ElementThe <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> ElementThe <text> element defines a reference to a text object stored as text.

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

The <video> ElementThe <video> element defines a reference to a video object stored as recorded video.Example<html xmlns:t="urn:schemas-microsoft-com:time"><head><?import namespace="t" implementation="#default#time2"></head><body>

7

<t:videosrc="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" width="128" height="107" /> <img class="t" src="pic_http.jpg" dur="1s" width="128" height="102" /></t:seq>

</body>

8

</html> Displaying a sequence of texts


<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


<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


<t:transitionfilter targetelement="keyb"

9

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:audiosrc="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 ReferenceThis is a complete SMIL 2.0 Reference (under construction).

SMIL Timing ElementsElement 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 AttributesAttribute Description Verbegin Sets the delay before the element is displayed 1dur Sets the duration for the display 1endsync Synchronizes the stopping of parallel elements 1repeatCount Sets the number of repetitions for the display 1

10

SMIL Media ElementsElement 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 ElementsElement Description Ver<body> Defines the body of a SMIL document 1<smil> Defines a SMIL document 1

By: DataIntegratedEntitySource: http://w3schools.com/smil/default.asp

11

SMIL Tutorial

Documents

Transcript of SMIL Tutorial