SMIL Manousos Bouloukakis 26/05/2001 What does SMIL mean? Synchronized Multimedia Integration...

26/05/2001SMILManousos Bouloukakis

What does SMIL mean?

Synchronized Multimedia Integration Language Pronounce it "smile" !

The Synchronized Multimedia Integration Language (SMIL) is a recommendation from the World Wide Web Consortium (W3C)

that allows for the creation of time-based multimedia delivery over the web.

Based on XML, it allows developers to mix many types of media, text, video, graphics, audio and vector based animation together and to

synchronize them to a timeline.With the advent of faster connections to the Web, DSL and Cable

Modems. The next step in communications is synchronized multimedia. The language SMIL is as easy to publish as HTML

Introduction

What is SMIL ?

The new SMIL language is a powerful tool for creating synchronized multimedia presentations on the web

over low bandwidth connections. It is mainly meant to work with linear presentations where several types of media can be synchronized to one timeline. It does not work well with non-linear presentations and its

ability to skip around in the timeline is buggy at best. However, for slideshow style mixed media

presentations it the best the web has to offer

Companies Support for SMIL

SMIL's most vocal proponent is currently Real Networks who have built the

SMIL functionality into their Real G2 Player software.

Allaire is also supporting SMIL with a collection of SMIL tags for their popular Homesite HTML Editor

Netscape, Microsoft and Macromedia have all decided to withhold support from this standard

However, Microsoft, Macromedia and Compaq are currently developing another standard that more closely integrates synchronized multimedia with HTML. This standard is call HTML+TIME and has been proposed to the W3C as a competing standard. The W3C has characterized this standard as "extending SMIL into the browser" so learning SMIL won't be a dead end

A Sample Presentation

A Sample SMIL file

<smil>

<head>

</layout>

</head>

<body>

</body>

</smil>

Making of a SMIL

The making of a SMIL presentation is basically, these three things:

Create the areas for your media.

Fill in those areas with media objects.

Determine the order, in which to play them in sequence, parallel or combination of bothof both

How to write a SMIL document

What you need to create a SMIL document is... a simple text editor! SMIL is XML-based and is very similar with HTML and this makes the language easy to read and understand.

There are however differences between SMIL and HTML

SMIL is case-sensitive. All tags must be written in lower case.

SMIL is XML-based. Tags have to be ended.

So what do we need to specify?

Content — Instance of Media Item

Media Object Elements

Specification of part of media item

Clips in time

Spatial Layout

A Sample SMIL file

<smil>

<head>

</layout>

</head>

<body>

</body>

</smil>

The Layout Element

The layout element determines how the elements in the document's body are positioned on an abstract rendering surface (either visual or acoustic).

The layout element must appear before any of the declared layout is used in the document. If present, the layout element must appear in the head section of the document. If a document contains no layout element, the positioning of the body elements is implementation-dependent.

root-layout element

The root-layout element determines the value of the layout properties of the root element, which in turn determines the size of the window in which the SMIL

presentation is rendered.

root-layout element attributes

Background-Color Note that the default background color is transparent, which implies that, by default, the implementation-dependent window background will be shown.

height

Sets the height of the root element. Only length values are allowed.

Sets the width of the root element. Only length values are allowed.

Element content

The root-layout element is an empty element.

root-layout element example

<root-layout width="320" height="480“ background-color="white" />

</layout>

Region Element

Regions in our Example

Layout Adaptation in SMIL

The <img> Tag

<root-layout width="300" height="200" background-color="white" />

</layout> </head>

<body>

</body>

</smil>

<img> tag example

Clips in Space

Make your medium fill its area

<smil> <head> <layout> <root-layout width="147" height="116" background-color="yellow" /> <region id="region_1" left="8" top="10" width="116" height="81“

background-color="white" fit="fill" /> </layout> </head> <body>  <img src="madewithcss.gif" region="region_1" /> </body> </smil>

Make your medium meet its area

<region id="region_1" left="8" top="10" width="116" height="81"

background-color="white" fit="meet" /></layout>

Make your medium scroll within its area

<layout> <root-layout width="147" height="116" background-color="yellow" /> <region id="region_1" left="8" top="10" width="116" height="81"

background-color="white" fit="scroll"/></layout>

The fourth dimension: time!

Which Time?

Duration of a media object element

Duration of a Media Object Element ctd.

Start Time of elements - par

Start Time of elements - seq

Par’s and seq’s can be nested

Explicit start time in a par element

Start time relative to another element

End time of media object element

End time of par element— first

Alternate Content

Adaptation Issues

Specifying Adaptation in SMIL

SMIL Test Attributes

Specifying alternative behaviour

switch

• At most one of the children of a switch element is played.

• The first acceptable element is chosen, so ordering should be best first.

</ switch>

• Test attributes can be combined.

New Content Control in 2.0

Prefetch

• Control, timing, and adaptation of pre- loading media before its presentation

• Helps whole presentations progress with fewer hitches

Custom Test Attributes

• Anyone can define adaptive test attributes for use in SMIL

Prefetch example

<smil>

<body>

</par> <video id="main-event" src="rtsp://www.example.org/video.mpg"/>

</seq>

</body>

</smil>

Linking

Link from element to presentation

Link from element to element

Link from element to subpart of media object

Areas as source and destination of a link

Media object element revisited

<video id=" vid1" region=" R_ video"src=" rtsp:// www. w3. org/ CoolStuff. rm"clip- begin=" smpte= 00: 01: 19: 20"clip- end=" smpte= 00: 01: 38: 40"begin=" 3s"dur=" 22s"end=" 21s"alt=" Video of Joe chatting to Tim"longdesc=" Joe and Tim are in a meeting room. Joe

is ontheleft and Tim is on the right"title=" Joe greets Tim"system- bitrate=" 28800">

<area id=" joe" begin=" 0s" end=" 5s" coords=" 0%, 0%, 50%, 50%"

href=" http:// www. w3. org/" /> <area id=" tim" begin=" 5s" end=" 10s" coords=" 50%, 50%, 50%, 50%"href=" http:// www. w3. org/ Tim" /></ video>

Semantic annotations

SMIL meta element defines properties of a document

• The name attribute is the property and the content attribute gives the value.

• The list of properties (values of name attribute) are open- ended.

Attributes on par , seq and media object elements

abstract , author , copyright , title (recommended)

Attributes on media object elements

alt (contains alternative text, recommended),

longdesc (supplement to alt , but longer and should include descriptions

of areas)

Attributes on region elements

title (recommended)

Dynamic generated SMIL

Because of the text format of a SMIL document, it’s easy to be generated (like html) using standard technologies such as

CGI’s, PHP, Servlets. So we can have a SMIL document driven by a RDBMS or by User’s Selections.We will see an example of using

Java Servlets and Webmacro.

WebMacro Templates

WebMacro is based in Java’s Servlet technology.It is a script language that separate content from presentation layer(Model View Controller).It can be used to generate dynamic pages (HTML pages,Wap,XML,SMIL..). User can use an ordinary editor (text editor,html editor) in order to make a page template with tags that webmacro engine evaluate on the fly. For more info visit http://www.webmacro.org

System Architecture

SERVLET ENGINE

JAVA SERVLET

WEBMACRO TEMPLATE

INTERNET

WEBSERVER

CLIENT

DATABASE

WebMacro Script Template

<body>

<video src="$VIDEO" id="Video"

region="VideoChannel" title="Video"/>

<img src="$IMAGE" id="Headline Pix"

region="PixChannel" title="Headline Pix"/>

<text src="$TEXT" id="Ticker"

region="TextChannel" title="Ticker"/>

</par>

</body>

WebMacro Servlet

Handle (Webmacro context) {

context.put(“VIDEO”,” http://stream.internet.com/wdvl/wdvl.rm”);

context.put(“IMAGE”,” http://stream.internet.com/wdvl/wdvl.rp”);

context.put(“TEXT”,” http://stream.internet.com/wdvl/wdvl.rt”);

return getTemplate(“SMILDEMO.smil”);

You call here any Java Object in order to put the right content px a Result Set from a DB

Extensions to SMIL

www.real.com has develop some formats for Pictures, Text,Video that help to create powerful presentations.

•RealText

•RealAudio

•RealPix

The RealPix Format

•Based on XML

•Support Dynamic Image Effects (wipe,fade,cross fade)

•One RealPix file combine many images.

•Time information can be included.

•Used by RealPlayer product.

A Sample RealPix file

<imfl>

timeformat="dd:hh:mm:ss.xyz“ duration="0:20“ bitrate="12000“ preroll="0:10"

width="256"

height="256"

aspect="true"/>

<viewchange start="0:05" duration="0:03" srcx="32" srcy="32"

srch="192"/>

<viewchange start="0:10" duration="0:03" srcx="64" srcy="64" "

srch="128"/>

<viewchange start="0:15" duration="0:03" srcx="0" srcy="0" "

srch="256"/>

</imfl>

The previous example

Deployment

There are many ways to publish a SMIL presentation to WEB:

•If the browser support SMIL (hope to) then just add a link to the web page as usual

•Through a link and automatically open a SMIL compatible application (Real Player,..).

•Include a small applet (SOYA-http://www.helio.org) and pass the SMIL file as an parameter.

Using SOJA Applet

Inside your HTML code add this

<APPLET CODE="org.helio.soja.SojaApplet.class"

ARCHIVE="soja.jar" CODEBASE="../tutorial/"

WIDTH="400" HEIGHT="300">

</APPLET>

Location of Soja

SMIL file

Other parameters to applet

Embedded SMIL in HTML

Ordinary HTML Code

SMIL presentation

HTML+TIME

•Based on SMIL 2.0 Recommendation•Embedded in Internet Explorer 5.5

<HTML XMLNS:t ="urn:schemas-microsoft-com:time"> <HEAD> <STYLE> .time {behavior: url(#default#time2);} </STYLE> <?IMPORT namespace="t" implementation="#default#time2"> </HEAD> <BODY> <t:SEQ> <DIV CLASS="time" DUR="2">First line of text.</DIV> <DIV CLASS="time" DUR="2">Second line of text.</DIV> <DIV CLASS="time" DUR="2">Third line of text.</DIV> <DIV CLASS="time">Fourth line of text.</DIV> </t:SEQ> </BODY> </HTML>

End of presentation

Useful Links

•http://www.w3.org/AudioVideo/•http://www.xsmiles.org/•http://www.w3.org/TR/smil20/•http://www.helio.org/

Authoring Tools•Ezer by SMIL Media •Fluition by Confluent Technologies •Grins by Oratrix •HomeSite by Allaire •MAGpie, a captioning tool by WGBH •Perly SMIL, a SMIL 1.0 Perl module •RealSlideshow 2.0 by RealNetworks •SMIL Composer SuperToolz by HotSausage •Smilme by Aurora •TAG Editor 2.0 - G2 release by Digital Renaissance ??? •VeonStudio by Veon •Validator: SMIL 1.0, SMIL 2.0, SMIL 2.0 Basic and XHTML+SMIL by CWI.

SMIL Manousos Bouloukakis 26/05/2001 What does SMIL mean? Synchronized Multimedia Integration...

Documents

Transcript of SMIL Manousos Bouloukakis 26/05/2001 What does SMIL mean? Synchronized Multimedia Integration...

SMIL Synchronized Multimedia Integration Language Pronúnciese SMIL.

How to Pronounce the English Alphabet

Can You Pronounce it Right!

SMIL(web) Presentation (old)

Mobile SMIL

Parallel Networks That Learn to Pronounce English …papers.cnl.salk.edu/PDFs/Parallel Networks That Learn to Pronounce...Parallel Networks that Learn to Pronounce English Text Terrence

SMIL Content Adaptation for Embedded Devices. Tayeb Lemlouma, February 2003 1 Tayeb LEMLOUMA Nabil LAYÏADA WAM Project INRIA Rhône Alpes, France SMIL Europe.

Canada’s Financial Industry Newspaper | Investment Executive · cf/share2 '19 1.71 cash flow (smil.) % chg. 96.9 eps (92 roe '19 net income (smil.) %chg. 61.7 revenue (smil.) %chg.

SMIL Synchronized Multimedia Integration Language.

[Vaclav Smil] Global Catastrophes and Trends the (BookZZ.org)

W3C SMIL 2.0

How to Pronounce

SMIL EY THAI AND SUSHI

Podcasting & SMIL

SMIL. Andrea Patiño-2001683-2

How to Pronounce Russian Correctly

Pronounce It Perfectly in English01

Smil Article 2006 Oecd

Pronounce It Perfectly in French

Pronounce it Perfectly in Russian