smil synchronized multimedia integration language

SMIL

Synchronized Multimedia Integration Language

Presentation Outline

• XML• SMIL• Players• Editors• Trends

What is XML?

• The eXtensible Markup Language is really a meta-language. It is used to create markup languages, such as HTML.

• Although it is very similar to SGML, being a subset, it differs in two main ways: it is• much more compact and efficient than SGML

and is Web-native.

Definition of XML

• Extensible Markup Language (XML) is the universal language for data on the Web.

• It gives developers the power to deliver structured data from a wide variety of applications to the desktop for local computation and presentation.

• XML allows the creation of unique data formats for specific applications. It is also an ideal format for server-to-server transfer of structured data.

How XML is similar to HTML

XML uses tags just like HTML, but those tags don’t define text formatting. Instead the tags are used to create data structures.

Let’s see some examples…

Examples of HTML and XML

HTML Code:

 This is bold text…

XML Code:

<President> Bush</President>

Using our own custom tag named “President”, we have stored a small piece of information.

Detailed Example

XML Documents can be organized in a hierarchal fashion. Each

tag or node can have “sub” nodes under it. <President>

<Name>Clinton, Bill</Name><Age>58</Age><Terms>2</Terms>

</President>

Any number of nodes can be created under any given node. But each node must be “closed” using a closing tag, like </President>

XML Elements

• A “Node” in an XML document is known as an Element.

• An XML document can have any number of elements. • For example we could store information

about 10 Presidents in a document.

Multiple Elements

<Car><Manufacturer>Mitsubishi</Manufacturer><Model>Eclipse</Model><Year>1998</Year>

</Car>

<Car><Manufacturer>Pontiac</Manufacturer><Model>Sun Fire</Model><Year>1997<Year>

</Car> <Car>

<Manufacturer>Nissan</Manufacturer><Model>X-Terra</Model><Year>2000<Year><SUV>Yes</SUV>

</Car>

Attributes

Besides having “sub-elements”, every element can also have what are known as Attributes.

Attributes are declared “inside” the tag. You may already know how to use attributes if you have used the <IMG> or <A> tags in HTML.

For example:<A HREF=“somepage.html”>click here</A>

XML Attributes

Here’s an example of an XML element with an Attribute….

<Vehicle VIN=“3232382432832”><Year>1997</Year><Make>Dodge</Make>

</Vehicle>

We could make any element an attribute…For example, Make and Year could also have been made attributes. However you usually want only some unique characteristic of the element to be an attribute. Examples: Serial #, SKU#, Stock symbol, Product ID etc.

A Complete Example

<Customer ssn="325-93-3323"><FirstName>Rachel</FirstName><LastName>McKinnon</LastName><Accounts>

<Account AccountNumber="0023003020"><Type>Checking</Type><CurrentBalance>10000</CurrentBalance><OpenedOn>12/12/1999</OpenedOn>

</Account><Account AccountNumber="4423 1121 1122 1425">

<Type>Credit Card</Type><CurrentBalance>2000</CurrentBalance><OpenedOn>4/1/1997</OpenedOn>

</Account></Accounts>

</Customer>

Try this one yourself …

Company Name

Symbol Stock Price

Recent News Stories

Microsoft MSFT 51.45 •Microsoft introduces Windows XP•Bill Gates…

Amazon.com AMZN 19.60 •Amazon.com announces new e-commerce services at conference in NYC.

<company><symbol>MSFT</symbol><name>Microsoft</name><stockPrice>29.15</stockPrice><stories>

<story>MS will be introducing a new…

</story><story>

According to Bill Gates…</story>

</stories></company>

<company name=“Microsoft”><symbol>MSFT</symbol><stockPrice>29.15</stockPrice><stories>

<story>MS will be introducing a new…

</story><story>

According to Bill Gates…</story>

</stories></company>

XML Editors

Make an XML Declaration

• XML Document Type Declaration:a mechanism that allows XML authors to communicate data to document readers (such as browsers).

• This data includes: markup language, version, standalone document declaration and character encoding.

XML document type declarations

• <?xml version="1.0" standalone="yes"?>

• <?xml version="1.0" standalone="no"?>

• <?xml version="1.0" standalone="no" ENCODING="UTF-8"?>

• <? • These character open the declaration.

• xml • This statement differentiates XML from other

document formats, such as SGML and HTML.

• version • This statement differentiates between

versions of XML.Default Value: "1.0"

•

• standalone • The Standalone Document Declaration allows

the document author to specify whether a document-type-definition is to be used. Possible Values: "yes", "no"

• encoding• Ignore this feature unless you want to use

another type of character encoding other than UTF-8. Default Value: "UTF-8"

• ?> • These characters close the declaration.

What is UTF-8?

• UTF-8 stands for Unicode Transformation Format-8.

• It is an octet (8-bit) lossless encoding of Unicode characters.

XML DTD (Detail)

• <!ELEMENT • Elements state their relationships with

other elements, so that document readers understand how documents, complying to the DTD, work.

• +,*,?• These symbols represent the allowed use of

elements. For example, if "+" is associated with an element, then that element must be used at least once and can be used limitlessly.

• +: required and multiple *: optional and multiple ?: optional but singular

• #PCDATA • This statement, to a document reader,

means text. If a DTD designer wants text to be allowed in a document, "#PCDATA" will be used in the DTD to state that.

Example DTD(Document Type Definition) Novel Document Type

• <?xml version="1.0"?><!DOCTYPE NOVEL [<!ELEMENT NOVEL (FORWORD,CHAPTER+,BIOGRAPHY?,CRITICALESSAY*)><!ELEMENT FORWORD (PARAGRAPH+)> <!ELEMENT CHAPTER (SECTION+|PARAGRAPH+)><!ELEMENT SECTION (PARAGRAPH+)> <!ELEMENT BIOGRAPHY(PARAGRAPH+)> <!ELEMENT CRITICALESSAY (SECTION+)> <!ELEMENT PARAGRAPH (#PCDATA)> ]>

External DTD

• <?xml version="1.0"?> <!DOCTYPE greeting SYSTEM "hello.dtd"> <greeting>Hello, world!</greeting>

Internal DTD

• <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE greeting [ <!ELEMENT greeting (#PCDATA)> ]>

<greeting>Hello, world!</greeting>

XML DTD

• <?xml version="1.0"?><!DOCTYPE MEMO [<!ELEMENT MEMO (TO,FROM,SUBJECT,BODY,SIGN)><!ELEMENT TO (#PCDATA)><!ELEMENT FROM (#PCDATA)><!ELEMENT SUBJECT (#PCDATA)><!ELEMENT BODY (P+)><!ELEMENT P (#PCDATA)><!ELEMENT SIGN (#PCDATA)>

]>

XML ResourcesMicrosoft Developer Network (MSDN)http://msdn.microsoft.com/xml

The BizTalk Frameworkhttp://www.biztalk.org

IBM’s XML Zonehttp://www.ibm.com/developer/xml/

W3C XML Standards Bodyhttp://www.w3c.org/xml

XSL Introductionhttp://phoenix.liunet.edu/~vasilaky/cs690/XSLTutorial.htm

http://msdn.microsoft.com/xml

http://www.biztalk.org/

http://www.ibm.com/developer/xml/

http://www.w3c.org/xml

http://phoenix.liunet.edu/~vasilaky/cs690/XSLTutorial.htm

XML Example; FIRST.XML

<?xml version="1.0" encoding="ISO8859-1" ?><?xml-stylesheet type="text/xsl" href="first.xsl"?><CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD></CATALOG>

<?xml version='1.0'?><xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"><xsl:template match="/"> <html> <body> <table border="2" bgcolor="yellow"> <tr> <th>Title</th> <th>Artist</th> </tr> <xsl:for-each select="CATALOG/CD"> <tr> <td><xsl:value-of select="TITLE"/></td> <td><xsl:value-of select="ARTIST"/></td> </tr> </xsl:for-each> </table> </body> </html></xsl:template></xsl:stylesheet>

FIRST.XSL

SMIL

• SMIL is a markup language that lets you control the location, timing and sequence of still images, video, and sound for use in web-based applications.

• W3 Specification

SMIL :-) SMIL allows the integration of a set of independent

multimedia objects into a synchronized multimedia

presentation. The objects may include

• Real Text

• Real Pix

• Real Audio

• Real Video

SMIL :-)

• A Simple SMIL Presentation

• Another Example

SMIL Presentations

The SMIL presentation included • A Real Text File for the Details (text)• A Real pix File for the pictures (stills)• Audio Files

Real Text

• Files with extension .rt• Use all HTML Tags along with some of

its own• Can have hyperlinks to other HTML

documents as well as time control tags.

Window TypesRealText provides a number of window styles that you can choose depending on how you want to display text.• Generic

• Scrolling News

• Ticker Tape

• Marquee

The real Text file starts with the Tag <Window>

A typical window tags looks like

<WINDOW TYPE = generic duration = "02:00" scrollrate="pixels per second" crawlrate="pixels per second" height = 449 width = 218 BGCOLOR = ”white” link= ”blue" LOOP = true>

Window Tag Attributes

Text Tags • Time and Position Tags• The following tags affect when and where

the text appears within the window.<time begin="dd:hh:mm:ss.xyz"/><time end="dd:hh:mm:ss.xyz"/>

• The <time/> tag values are in 24-hour format, where dd is days, hh is hours, mm is minutes,...

Layout and AppearanceTags

• Much as in HTML, the following tags let you define the layout of RealText in the RealPlayer window.• ...• … • pre, u, center,etc

Command Tags

• The following tags let you embed RealPlayer commands in your presentation or modify the default streaming behavior.

• <a href="URL" [target="_player"]>...</a>• You can include the target="_player” attribute

to launch the new stream in the current RealPlayer window. If you do not use the target attribute or you specify target="_browser", the linked URL opens in a Web browser window.

Generic – Real Text

<window duration="30" bgcolor="yellow">Mary had a little lamb, <time begin="3"/>little lamb, <time begin="6"/>little lamb. <time begin="9"/>Mary had a little lamb, <time begin="12"/>whose fleece was white as snow. <time begin="15"/><clear/>Everywhere that Mary went, <time begin="18"/>Mary went, <time begin="21"/>Mary went, <time begin="24"/>Everywhere that Mary went, <time begin="27"/>That lamb was sure to go.</window>

Real Text

• acsdetails.rt • Text File for acsdetails• acsmain.rt• text file for acsmain• Summary of Window tags

(www.real.com)• Summary of Text Tags

(www.real.com)

Real Pix

• Files with extension .rp• start with a tag <imfl>• can be used to set images in a

time line

Real Pix

RealPix can stream images in these formats:

• GIF87 and GIF89 (.gif) • RealPix does not support animated GIFs.• JPEG (.jpg)

• Note That no Bitmaps can be used

• (http://service.real.com/help/library/guides/realpix/htmfile)

• RealPix tags and attribute names must be lowercase.

• A tag that does not have a corresponding end tag closes with a forward slash (/): <fadein.../>.

Real Pix

Layout

<imfl><head /><transitions />

</imfl>

Head and <imfl> Attributes

• All information in the file occurs between an opening <imfl> tag and a closing </imfl> tag. This is the only tag that uses an end tag.

Head tag

• The <head/> tag defines standard header information such as title, author, and copyright. It also sets necessary parameters such as the presentation duration and streaming bit rate.

Layout of the <head> and tags

<imfl> <head bitrate="8000” width = "218” height="151"

timeformat = "dd:hh:mm:ss.xyz"duration = "02:00" title = "Applied Computer Science

Department" author ="Joaquin Vila" copyright ="(c) 1999 Illinois State University"url ="http://www.itk.ilstu.edu"aspect ="true"/>

Bandwidth

• Bandwidth is the upper limit on how much data per second can pass through a network connection. • Targeting a network connection’s bandwidth is

crucial for delivering a successful streaming media presentation.

• Web users with a 28.8 Kbps modem need to view presentations that require less than 28.8 Kbps of data per second.

• One of the first steps in building a presentation is to target a bandwidth and construct the content with that connection speed in mind.

Bandwidth

• you can choose to generate encoding in both slow speed modems and fast T1 networks.

• You must select target bit rates for audio, pictures, text, and video, then add them up to see if they will fit into this bandwidth.

Choosing a Target Bandwidth

• A presentation's total bit rate must be at or below the target bit rate.

• The total bit rate is comprised of two main parts: • The maximum bit rate consumed by all

streaming clips. • Overhead. Save about 25% of the target bit

rate for noise, data loss, and packet overhead. • Overhead depends on the type of connection. A

modem connection typically has more overhead than an ISDN or T1 line.

Bit Rates Available for Streaming Clips

Image tag <image/>

• For each image you use in the RealPix presentation, you add an <image/> tag after the <head/> tag.

• The <image/> tag provides the image file location and assigns a unique handle number to the image.

• An <image/> tag looks like this:<image handle=”1"

name="eagle.jpg"/>

Transitions: Fill Tag• The <fill/> tag displays a colored

rectangle in the display window. • A <fill/> tag looks like this:• <fill start="0" color="blue"/>

• The <fadein/> tag creates a gradual transition from the currently displayed color or image to another image.

• A <fadein/> tag looks like this:<fadein start="4" duration="3"

target="2"/>

fadein tag

fadeout tag

• The <fadeout/> tag defines a transition from an image to a color.

<fadeout start="10”duration="3”color="yellow"/>

• Crossfade • The <crossfade/> tag creates a

transition from one image to another<crossfade start="40" duration="2.5" target

="3"/>

Crossfade

Wipe

• Wipe• The <wipe/> tag creates a transition

from one image to another, either by covering the displayed image or by pushing it out of the way with a sliding effect.

• <wipe type="push" direction="left" start="10" duration="3" target="2"/>

• View Change• The <viewchange/> tag defines a

pan or a zoom. • <viewchange start="24"

duration="3" srcx="80" srcy="80" srcw="48" srch="48"/>

• Note that <viewchange/> does not specify an image. The view change always affects the image currently in the display window.

Lets look at our File Now

• Acs Pictures • Code• Sample

• The next task would be to combine the text pictures and audio in a SMIL Presentation

SMIL

• Synchronized Multimedia Integration Language (SMIL) was introduced in July of 1998.

• HTML + SMIL• HTML + TIME• SMIL 2.0

SMIL :)

• Like an HTML file, a SMIL file begins with a <smil> tag identifying it as a SMIL file, and contains <head> and <body> sections.

• The <head> section contains information describing the appearance and layout of our presentation

• The <body>section contains the timing and content information.

Head section• The Head section contains information

about the presentation

<head><meta name="author" content=""/><meta name="title" content=“ITK - SMIL demo"/><meta name="copyright" content="© 2000"/>

The Document Head

• The LAYOUT element determines how the elements in the

document's body are positioned on an abstract rendering surface either visual or acoustic)

Layout• The head has a layout tag which defines the

various windows in which the files are going to be displayed

<layout><root-layout height="600" width="618"/>

<region id="acs01_Region" left="0" top="0" height="150" width="218" z-index="0"/>

<region id="acsmain_Region" left="0" top="150" height="450" width="218" z-index="0"/>

<region id="acsdetail_Region" left="218" top="1" height="600" width="400" z-index="0"/>

</layout>

• a • animation • audio • img • par

• seq • switch • text • textstream • Video

The "body" element can contain the following

Body and its tags

A body of ITK SMIL

<body><par> <audio src="oktober.rm" systembitrate="8041"repeat="6"/> <switch> <audio id="usa" src="acsralph.rm" system-language="en" system-bitrate="8041"/>

<audio id="turkey" src="acsjoaquin.rm" system-language="tr" system-bitrate="8041"/>

</switch> <img id="acs01" src="acs01.rp" region="acs01_Region" system-bitrate="12000“

repeat="4"/> <textstream id="acsdetail" src="acsdetail.rt“ region="acsdetail_Region“

system-bitrate="599" repeat="4"/></par>

</body>

The Seq Tag

• When the media objects like img, audio, video are the children of the seq tag they play in a sequential order

<seq> <audio id="a" begin="6s" src="audio" /> <img src = <img id="acs01" src="acs01.rp region="acs01_Region" system-bitrate="12000" repeat="4"/>

</seq>

The par Element

• The children of a par element can overlap in time. Element Attributes • abstract • begin <par>

<audio id="a" begin="6s" src="audio" /> <img src = <img id="acs01" src="acs01.rp region="acs01_Region" system-bitrate="12000" repeat="4"/>

</par> par

I------------------------I

6s a<------->I--------------I

The switch Element

• The switch element allows an author to specify a set of alternative elements from which only one acceptable element should be chosen.

• An element is selected as follows: the player evaluates the elements in the order in which they occur in the switch element. The first acceptable element is selected at the exclusion of all other elements within the switch.

Hyperlinking Elements

• The link elements allows the description of navigational links between objects.

• SMIL provides only for in-line link elements. Links are limited to uni-directional single-headed links. All links in SMIL are actuated by the user.

• SMILs can be linked to X/HTML pages as well as to other SMIL presentations

Final SMIL Presentation

• ACS Department • Code

• Other Examples• Computer

ACSCD.SMI

<smil> <head> <meta name="author" content="Joaquin Vila"/> <meta name="title" content=“ITK Demo"/> <layout>

<root-layout height="240" width="640"/><region id="htext_Region" left="0" top="0" height="240" width="320" z-index="0"/><region id="Cd_Region" left="320" top="0" height="240" width="320" z-index="0"/>

</layout> </head> <body> <par>

<textstream id="htext" src="htext.rt" region="htext_Region" system-bitrate=“1000"/><video id="Cd" src="Cd.rm" region="Cd_Region" system-bitrate=“80000"/>

</par> </body></smil>

htext.rt

<WINDOW TYPE=generic duration="5:00.0" scrollrate=0 height=320 width=320 BGCOLOR="#000066" link="#FFFFCC" LOOP=true>

 <pos y="10"/> Please, make your selection

Definitions for:

htext.rt

<time begin ="00:00"/> <a href="acsmonitor.smi" target="_player">Monitor</a> 

<time begin ="00:00"/> <a href="acscd.smi" target="_player">CD</a> </WINDOW>

WWW.W3.org

• Amaya: W3C's Editor/Browser• browser/authoring tool that allows you

to publish documents on the Web. • It is used to demonstrate and test many

of the new developments in Web protocols and data formats. Given the very fast moving nature of Web

• available on both Unix and Windows '95/NT platforms.

SMIL Generator