1. SMIL Manousos Bouloukakis 26/05/2001 What does SMIL mean? Synchronized Multimedia Integration Language Pronounce it "smile" !

2. SMIL Manousos Bouloukakis 26/05/2001 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

3. SMIL Manousos Bouloukakis 26/05/2001 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

4. SMIL Manousos Bouloukakis 26/05/2001 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.Real Networks Allaire is also supporting SMIL with a collection of SMIL tags for their popular Homesite HTML Editor Allaire 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 endHTML+TIME

5. SMIL Manousos Bouloukakis 26/05/2001 A Sample Presentation

6. SMIL Manousos Bouloukakis 26/05/2001 A Sample Presentation

7. SMIL Manousos Bouloukakis 26/05/2001 A Sample Presentation

8. SMIL Manousos Bouloukakis 26/05/2001 A Sample SMIL file

9. SMIL Manousos Bouloukakis 26/05/2001 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 both of both

10. SMIL Manousos Bouloukakis 26/05/2001 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.

11. SMIL Manousos Bouloukakis 26/05/2001 So what do we need to specify?

12. SMIL Manousos Bouloukakis 26/05/2001 Content — Instance of Media Item

13. SMIL Manousos Bouloukakis 26/05/2001 Media Object Elements

14. SMIL Manousos Bouloukakis 26/05/2001 Specification of part of media item

15. SMIL Manousos Bouloukakis 26/05/2001 Clips in time

16. SMIL Manousos Bouloukakis 26/05/2001 Spatial Layout

17. SMIL Manousos Bouloukakis 26/05/2001 A Sample SMIL file

18. SMIL Manousos Bouloukakis 26/05/2001 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).layout 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.layout headlayout

19. SMIL Manousos Bouloukakis 26/05/2001 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

20. SMIL Manousos Bouloukakis 26/05/2001 root-layout element attributes Background-ColorBackground-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. 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

21. SMIL Manousos Bouloukakis 26/05/2001 root-layout element example

22. SMIL Manousos Bouloukakis 26/05/2001 Region Element

23. SMIL Manousos Bouloukakis 26/05/2001 Regions in our Example

24. SMIL Manousos Bouloukakis 26/05/2001 Layout Adaptation in SMIL

25. SMIL Manousos Bouloukakis 26/05/2001 The Tag

26. SMIL Manousos Bouloukakis 26/05/2001 tag example

27. SMIL Manousos Bouloukakis 26/05/2001 Clips in Space

28. SMIL Manousos Bouloukakis 26/05/2001 Make your medium fill its area <region id="region_1" left="8" top="10" width="116" height="81“ background-color="white" fit="fill" />

29. SMIL Manousos Bouloukakis 26/05/2001 Make your medium meet its area <region id="region_1" left="8" top="10" width="116" height="81" background-color="white" fit="meet" />

30. SMIL Manousos Bouloukakis 26/05/2001 Make your medium scroll within its area <region id="region_1" left="8" top="10" width="116" height="81" background-color="white" fit="scroll"/>

31. SMIL Manousos Bouloukakis 26/05/2001 The fourth dimension: time!

32. SMIL Manousos Bouloukakis 26/05/2001 Which Time?

33. SMIL Manousos Bouloukakis 26/05/2001 Duration of a media object element

34. SMIL Manousos Bouloukakis 26/05/2001 Duration of a Media Object Element ctd.

35. SMIL Manousos Bouloukakis 26/05/2001 Start Time of elements - par

36. SMIL Manousos Bouloukakis 26/05/2001 Start Time of elements - seq

37. SMIL Manousos Bouloukakis 26/05/2001 Par’s and seq’s can be nested

38. SMIL Manousos Bouloukakis 26/05/2001 Explicit start time in a par element

39. SMIL Manousos Bouloukakis 26/05/2001 Start time relative to another element

40. SMIL Manousos Bouloukakis 26/05/2001 End time of media object element

41. SMIL Manousos Bouloukakis 26/05/2001 End time of par element— first

42. SMIL Manousos Bouloukakis 26/05/2001 Alternate Content

43. SMIL Manousos Bouloukakis 26/05/2001 Adaptation Issues

44. SMIL Manousos Bouloukakis 26/05/2001 Specifying Adaptation in SMIL

45. SMIL Manousos Bouloukakis 26/05/2001 SMIL Test Attributes

46. SMIL Manousos Bouloukakis 26/05/2001 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. Test attributes can be combined.

47. SMIL Manousos Bouloukakis 26/05/2001 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

48. SMIL Manousos Bouloukakis 26/05/2001 Prefetch example

49. SMIL Manousos Bouloukakis 26/05/2001 Linking

50. SMIL Manousos Bouloukakis 26/05/2001 Link from element to presentation

51. SMIL Manousos Bouloukakis 26/05/2001 Link from element to element

52. SMIL Manousos Bouloukakis 26/05/2001 Link from element to subpart of media object

53. SMIL Manousos Bouloukakis 26/05/2001 Areas as source and destination of a link

54. SMIL Manousos Bouloukakis 26/05/2001 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 on the left 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/" />

55. SMIL Manousos Bouloukakis 26/05/2001 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)

56. SMIL Manousos Bouloukakis 26/05/2001 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.

57. SMIL Manousos Bouloukakis 26/05/2001 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

58. SMIL Manousos Bouloukakis 26/05/2001 System Architecture

59. SMIL Manousos Bouloukakis 26/05/2001 WebMacro Script Template <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"/>

60. SMIL Manousos Bouloukakis 26/05/2001 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

61. SMIL Manousos Bouloukakis 26/05/2001 Extensions to SMIL www.real.comwww.real.com has develop some formats for Pictures, Text,Video that help to create powerful presentations. RealText RealAudio RealPix

62. SMIL Manousos Bouloukakis 26/05/2001 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.

63. SMIL Manousos Bouloukakis 26/05/2001 A Sample RealPix file <head 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"/>

64. SMIL Manousos Bouloukakis 26/05/2001 The previous example

65. SMIL Manousos Bouloukakis 26/05/2001 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.

66. SMIL Manousos Bouloukakis 26/05/2001 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"> Location of Soja SMIL file Other parameters to applet

67. SMIL Manousos Bouloukakis 26/05/2001 Embedded SMIL in HTML Ordinary HTML Code SMIL presentation

68. SMIL Manousos Bouloukakis 26/05/2001 HTML+TIME Based on SMIL 2.0 Recommendation Embedded in Internet Explorer 5.5.time {behavior: url(#default#time2);} First line of text. Second line of text. Third line of text. Fourth line of text.

69. SMIL Manousos Bouloukakis 26/05/2001 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 MediaEzer Fluition by Confluent TechnologiesFluition Grins by OratrixGrins HomeSite by AllaireHomeSite MAGpie, a captioning tool by WGBHMAGpie Perly SMIL, a SMIL 1.0 Perl modulePerly SMIL RealSlideshow 2.0 by RealNetworksRealSlideshow 2.0 SMIL Composer SuperToolz by HotSausageSMIL Composer SuperToolz Smilme by AuroraSmilme TAG Editor 2.0 - G2 release by Digital Renaissance ???TAG Editor 2.0 - G2 release VeonStudio by VeonVeonStudio Validator: SMIL 1.0, SMIL 2.0, SMIL 2.0 Basic and XHTML+SMIL by CWI.Validator: SMIL 1.0, SMIL 2.0, SMIL 2.0 Basic and XHTML+SMIL