What does SMIL mean Manousos Bouloukakis SMIL 26052001
What does SMIL mean? Manousos Bouloukakis SMIL 26/05/2001 Synchronized Multimedia Integration Language Pronounce it "smile" !
Introduction Manousos Bouloukakis SMIL 26/05/2001 The Synchronized Multimedia Integration Language (SMIL) is a recommendation from the World Wide Web Consortium (W 3 C) 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
What is SMIL ? Manousos Bouloukakis SMIL 26/05/2001 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 Manousos Bouloukakis SMIL 26/05/2001 ü SMIL's most vocal proponent is currently Real Networks who have built the SMIL functionality into their Real G 2 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 W 3 C as a competing standard. The W 3 C has characterized this standard as "extending SMIL into the browser" so learning SMIL won't be a dead end
A Sample Presentation Manousos Bouloukakis SMIL 26/05/2001
A Sample Presentation Manousos Bouloukakis SMIL 26/05/2001
A Sample Presentation Manousos Bouloukakis SMIL 26/05/2001
A Sample SMIL file Manousos Bouloukakis SMIL 26/05/2001 <smil> <head> <meta name="copyright" content="Your Name" /> <layout> <!-- layout tags --> </layout> </head> <body> <!-- media and synchronization tags --> </body> </smil>
Making of a SMIL Manousos Bouloukakis SMIL 26/05/2001 The making of a SMIL presentation is basically, these three things: q Create the areas for your media. q Fill in those areas with media objects. q Determine the order, in which to play them in sequence, parallel or combination of both
How to write a SMIL document Manousos Bouloukakis SMIL 26/05/2001 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? Manousos Bouloukakis SMIL 26/05/2001
Content — Instance of Media Item Manousos Bouloukakis SMIL 26/05/2001
Media Object Elements Manousos Bouloukakis SMIL 26/05/2001
Specification of part of media item Manousos Bouloukakis SMIL 26/05/2001
Clips in time Manousos Bouloukakis SMIL 26/05/2001
Spatial Layout Manousos Bouloukakis SMIL 26/05/2001
A Sample SMIL file Manousos Bouloukakis SMIL 26/05/2001 <smil> <head> <meta name="copyright" content="Your Name" /> <layout> <!-- layout tags --> </layout> </head> <body> <!-- media and synchronization tags --> </body> </smil>
The Layout Element Manousos Bouloukakis SMIL 26/05/2001 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 Manousos Bouloukakis SMIL 26/05/2001 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 Manousos Bouloukakis SMIL 26/05/2001 Background-Color Note that the default background color is transparent, which implies that, by default, the implementationdependent window background will be shown. height Sets the height of the root element. Only length values are allowed. width 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 Manousos Bouloukakis SMIL <layout> <root-layout width="320" height="480“ background-color="white" /> </layout> 26/05/2001
Region Element Manousos Bouloukakis SMIL 26/05/2001
Regions in our Example Manousos Bouloukakis SMIL 26/05/2001
Layout Adaptation in SMIL Manousos Bouloukakis SMIL 26/05/2001
The <img> Tag Manousos Bouloukakis SMIL 26/05/2001 <smil> <head> <layout> <root-layout width="300" height="200" background-color="white" /> <region id="vim_icon" left="75" top="50" width="32" height="32" /> </layout> </head> <body> <img src="vim 32 x 32. gif" alt="The vim icon" region="vim_icon" /> </body> </smil>
<img> tag example Manousos Bouloukakis SMIL 26/05/2001
Clips in Space Manousos Bouloukakis SMIL 26/05/2001
Make your medium fill its area Manousos Bouloukakis SMIL <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> <!-- this image is smaller than its region --> <img src="madewithcss. gif" region="region_1" /> </body> </smil> 26/05/2001
Make your medium meet its area Manousos Bouloukakis SMIL 26/05/2001 <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="meet" /> </layout>
Make your medium scroll within its area Manousos Bouloukakis SMIL 26/05/2001 <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! Manousos Bouloukakis SMIL 26/05/2001
Which Time? Manousos Bouloukakis SMIL 26/05/2001
Duration of a media object element Manousos Bouloukakis SMIL 26/05/2001
Duration of a Media Object Element ctd. Manousos Bouloukakis SMIL 26/05/2001
Start Time of elements - par Manousos Bouloukakis SMIL 26/05/2001
Start Time of elements - seq Manousos Bouloukakis SMIL 26/05/2001
Par’s and seq’s can be nested Manousos Bouloukakis SMIL 26/05/2001
Explicit start time in a par element Manousos Bouloukakis SMIL 26/05/2001
Start time relative to another element Manousos Bouloukakis SMIL 26/05/2001
End time of media object element Manousos Bouloukakis SMIL 26/05/2001
End time of par element— first Manousos Bouloukakis SMIL 26/05/2001
Alternate Content Manousos Bouloukakis SMIL 26/05/2001
Adaptation Issues Manousos Bouloukakis SMIL 26/05/2001
Specifying Adaptation in SMIL Manousos Bouloukakis SMIL 26/05/2001
SMIL Test Attributes Manousos Bouloukakis SMIL 26/05/2001
Specifying alternative behaviour Manousos Bouloukakis SMIL 26/05/2001 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> <audio system- bitrate=" 44000" src=" hi-res. aiff" /> <audio system- bitrate=" 16000" src=" low- res. aiff" /> </ switch> • Test attributes can be combined.
New Content Control in 2. 0 Manousos Bouloukakis SMIL 26/05/2001 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 Manousos Bouloukakis SMIL <smil> <body> <seq> <par> <prefetch id="endimage" src="http: //www. example. org/logo. gif"/> <text id="interlude" src= http: //www. example. org/pleasewait. html fill="freeze"/> </par> <video id="main-event" src="rtsp: //www. example. org/video. mpg"/> <image src="http: //www. example. org/logo. gif" dur="5 s"/> </seq> </body> </smil> 26/05/2001
Linking Manousos Bouloukakis SMIL 26/05/2001
Link from element to presentation Manousos Bouloukakis SMIL 26/05/2001
Link from element to element Manousos Bouloukakis SMIL 26/05/2001
Link from element to subpart of media object Manousos Bouloukakis SMIL 26/05/2001
Areas as source and destination of a link Manousos Bouloukakis SMIL 26/05/2001
Media object element revisited Manousos Bouloukakis SMIL 26/05/2001 <video id=" vid 1" region=" R_ video" src=" rtsp: // www. w 3. org/ Cool. Stuff. rm" clip- begin=" smpte= 00: 01: 19: 20" clip- end=" smpte= 00: 01: 38: 40" begin=" 3 s" dur=" 22 s" end=" 21 s" alt=" Video of Joe chatting to Tim" longdesc=" Joe and Tim are in a meeting room. Joe is on the left and Tim is on the right" title=" Joe greets Tim" system- bitrate=" 28800"> <area id=" joe" begin=" 0 s" end=" 5 s" coords=" 0%, 50%, 50%" href=" http: // www. w 3. org/" /> <area id=" tim" begin=" 5 s" end=" 10 s" coords=" 50%, 50%"href=" http: // www. w 3. org/ Tim" /> </ video>
Semantic annotations Manousos Bouloukakis SMIL 26/05/2001 SMIL meta element defines properties of a document • The name attribute is the property and the content attribute gives the value. <meta name=" title" content=" Web News, 15 th June 1998" /> <meta name=" base" content=" http: // www. cwi. nl/ SMIL/ webnews/" /> • 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 Manousos Bouloukakis SMIL 26/05/2001 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.
Web. Macro Templates Manousos Bouloukakis SMIL 26/05/2001 Web. Macro 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 Manousos Bouloukakis SMIL 26/05/2001
Web. Macro Script Template Manousos Bouloukakis SMIL 26/05/2001 <body> <par title="multiplexor"> <video src="$VIDEO" id="Video" region="Video. Channel" title="Video"/> <img src="$IMAGE" id="Headline Pix" region="Pix. Channel" title="Headline Pix"/> <text src="$TEXT" id="Ticker" region="Text. Channel" title="Ticker"/> </par> </body>
Web. Macro Servlet Manousos Bouloukakis SMIL 26/05/2001 Handle (Webmacro context) { context. put(“VIDEO”, ” http: //stream. internet. com/wdvl. rm”); context. put(“IMAGE”, ” http: //stream. internet. com/wdvl. rp”); context. put(“TEXT”, ” http: //stream. internet. com/wdvl. rt”); return get. Template(“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 Manousos Bouloukakis SMIL 26/05/2001 www. real. com has develop some formats for Pictures, Text, Video that help to create powerful presentations. • Real. Text • Real. Audio • Real. Pix
The Real. Pix Format Manousos Bouloukakis SMIL 26/05/2001 • Based on XML • Support Dynamic Image Effects (wipe, fade, cross fade) • One Real. Pix file combine many images. • Time information can be included. • Used by Real. Player product.
A Sample Real. Pix file Manousos Bouloukakis <imfl> SMIL 26/05/2001 <head timeformat="dd: hh: mm: ss. xyz“ duration="0: 20“ bitrate="12000“ preroll="0: 10" width="256" height="256" aspect="true"/> <image handle="1" name="mosque. jpg"/> <fadein start="0: 01" duration="0: 03" target="1"/> <!-- Zoom in. --> <viewchange start="0: 05" duration="0: 03" srcx="32" srcy="32" srch="192"/> <!-- Zoom in even more. --> <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"/> <!-- Zoom out. --> </imfl>
The previous example Manousos Bouloukakis SMIL 26/05/2001
Deployment Manousos Bouloukakis SMIL 26/05/2001 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 (SOYAhttp: //www. helio. org) and pass the SMIL file as an parameter.
Using SOJA Applet Manousos Bouloukakis 26/05/2001 SMIL Inside your HTML code add this Location of Soja <APPLET CODE="org. helio. soja. Soja. Applet. class" ARCHIVE="soja. jar" CODEBASE=". . /tutorial/" SMIL file WIDTH="400" HEIGHT="300"> <PARAM NAME="source" VALUE="demo. smil"> <PARAM NAME="bgcolor" VALUE="#000066"> </APPLET> Other parameters to applet
Embedded SMIL in HTML Manousos Bouloukakis SMIL 26/05/2001 Ordinary HTML Code SMIL presentation
HTML+TIME Manousos Bouloukakis SMIL • 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#time 2); } </STYLE> <? IMPORT namespace="t" implementation="#default#time 2"> </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> 26/05/2001
End of presentation Manousos Bouloukakis SMIL Useful Links • http: //www. w 3. org/Audio. Video/ • http: //www. xsmiles. org/ • http: //www. w 3. org/TR/smil 20/ • http: //www. helio. org/ Authoring Tools • Ezer by SMIL Media • Fluition by Confluent Technologies • Grins by Oratrix • Home. Site by Allaire • MAGpie, a captioning tool by WGBH • Perly SMIL, a SMIL 1. 0 Perl module • Real. Slideshow 2. 0 by Real. Networks • SMIL Composer Super. Toolz by Hot. Sausage • Smilme by Aurora • TAG Editor 2. 0 - G 2 release by Digital Renaissance ? ? ? • Veon. Studio by Veon • Validator: SMIL 1. 0, SMIL 2. 0 Basic and XHTML+SMIL by CWI. 26/05/2001
- Slides: 69
