SMIL Synchronized Multimedia Integration Language.
-
Upload
jeremy-rogers -
Category
Documents
-
view
239 -
download
4
Transcript of 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:
<b> This is bold text…</b>
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
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.• <p>...</p>• <b>… </b> • 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,<br/><time begin="3"/>little lamb,<br/><time begin="6"/>little lamb.<br/><time begin="9"/>Mary had a little lamb,<br/><time begin="12"/>whose fleece was white as snow.<br/><time begin="15"/><clear/>Everywhere that Mary went,<br/><time begin="18"/>Mary went,<br/><time begin="21"/>Mary went,<br/><time begin="24"/>Everywhere that Mary went,<br/><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
<imfl> <head bitrate="80000" 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.acs.ilstu.edu"aspect="true"/>
<image handle="1" name="acs01a.jpg"/> <image handle="2" name="acs02a.jpg"/> <image handle="3" name="acs03a.jpg"/> <image handle="4" name="acs04a.jpg"/> <image handle="5" name="acs05a.jpg"/> <image handle="6" name="acsISUlogo.jpg"/>
<fill start="0" color="blue"/>
<fadein start="1" duration="3" target="1"/> <fadeout start="20" duration="3" color="black"/> <fadein start="23" duration="3" target="2"/> <crossfade start="40" duration="2.5" target ="3"/> <crossfade start ="01:00" duration ="3" target="4"/> <fadein start="01:20" duration="3" target="5"/> <crossfade start="01:40" duration="3" target ="6"/></imfl>
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>
<BR/><BR/> <font size="4" color="white" face="times"><pos y="10"/> <I>Please, make your selection</I><P>
<b>Definitions for:</b></font> <BR/><BR/>
htext.rt
<time begin ="00:00"/> <font size="3" color="white" face="times"> <a href="acsmonitor.smi" target="_player">Monitor</a> </font><BR/>
<time begin ="00:00"/> <font size="3" color="white" face="times"> <a href="acscd.smi" target="_player">CD</a> </font><BR/> </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
SMIL Generator
SMIL Generator