1 / 26

SMIL

SMIL. Ellen Pearlman Eileen Mullin Programming the Web Using XML. Learning Objectives. Investigating SMIL in terms of both multimedia and XML development Interpreting the critical differences between SMIL 1.0 and SMIL 2.0 and the correct ways to view them

rory
Download Presentation

SMIL

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. SMIL Ellen Pearlman Eileen Mullin Programming the Web Using XML

  2. Learning Objectives • Investigating SMIL in terms of both multimedia and XML development Interpreting the critical differences between SMIL 1.0 and SMIL 2.0 and the correct ways to view them • Assembling the components of a basic SMIL statement • Linking multimedia within a SMIL presentation

  3. An Introduction to SMIL • SMIL (Synchronized Multimedia Integration Language, pronounced “smile”) lets one write interactive audiovisual presentations under the umbrella of XML-enabled standards of the W3C. • SMIL was developed partially to work around the issues of bandwidth limitations and partially it was developed to stitch together sound, text, video, and images in a simple format.

  4. An Introduction to SMIL (2) • Another forward-looking feature of SMIL is that it can be created and subsequently stored in a different language, bandwidth rate, sound format, and other versions. • SMIL does not require a complex programming language like Java, though it can incorporate Java servlets or CGI scripts to access information stored in a database.

  5. A RealOne Player SMIL Presentation on the Getty Museum

  6. A Brief History of SMIL: SMIL 1.0 • The first SMIL recommendation came out from the W3C in June 1998. • It focused around issues such as how media was delivered over time with tags like <seq> for sequence (one unit played after another) and <par> for parallel (units playing together). • Interestingly enough, Real Networks was an early supporter of SMIL but Microsoft was not, and wanted to incorporate SMIL into standard HTML.

  7. A Brief History of SMIL: SMIL 2.0 • The second version of SMIL was endorsed by W3C in August 2001, though work on it started as early as 1999. • It was written to expand the capabilities of version 1.0. Instead of just one DTD, it now contained 10. • These DTDs function as “modules”, part of the official specification and contain many more new elements and attributes.

  8. Modules in SMIL 2.0 • The modules are: • Animation • Content Control • Layout • Linking • Media Objects • Metainformation • Structure • Timing and Synchronization • Time manipulations • Transition Effects

  9. XML Spy Fails to Locate the SMIL 2.0 DTD

  10. Viewing SMIL • The best way to actually see a SMIL file, especially a SMIL 2.0 file in action is by using the RealPlayer from Real Networks. • Apple Computer has the QuickTime multimedia player that can be used on both Macs and PCs. • Internet Explorer also can use SMIL though its HTML+TIME (Timed Interactive Multimedia Extensions for HTML) SMIL-like language, which was first introduced in IE 5.

  11. Basic SMIL: Core Elements • The three core SMIL elements are: • <smil> opens and closes the actual <smil> statement and is the root element. • <head> is always contained within the root element. The header defines the structure of the presentation. • The <body> element defines the content and timing and if appropriate, linking information.

  12. Media Elements • The media elements allowed in SMIL include: • <animation>- Animation (.swf, .anim) • <audio>- Audio (.rm, .wav, .mp3, .aiff) • <img>- Image (.jpg, .gif, .png) • <ref>- Reference, points to anything not covered in the list (i.e. .rp) • <text>- Text (.txt, .html) • <textstream>- Streaming text (.rt, .mov) • <video>- Video (.rm, .mpg, .mov)

  13. SMIL Syntax for Media Elements <animation src="bartsimpson.anim" ... /> <audio src="grammyhits.wav" ... /> <img src="stockmarketgraph.jpg" ... /> <ref src="anyotherobject" ... /> <text src="openingtitle.html" ... /> <textstream src="rtsp://www.CNN.com/mediaheadlines.rt" ... /> <video src="mtvvideo.mpg" ... />

  14. SMIL Components Overview

  15. Anatomy of SMIL Code <?xml version="1.0" encoding=UTF-8"?> <!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" "http://www.w3.org/TR/REC-smil/SMIL20.dtd"> <smil xmlns="http://www.w3.org/2001/SMIL20/Language"> <!---Simply edited in NotePad---> <smil id="MyVeryFirst'> <head id="schoolpresentation"> <metaname="cool_animation.smil" content="schoolcontents"/> <layout> <root-layout width="400" height="280"/> <region id=audio_1/> <region id=image_1> </layout> </head> <body> <t:audio>...</t:audio> <t:text>...</t:text> <t:video...</t:video> </body> </smil>

  16. <layout> Module • Though contained within the <head> section of a SMIL document, layout elements and attributes give a name to, and define the position of windows and regions for media presentation. • The <layout> module is not essential in a SMIL presentation, but if it is not included the location of visual elements fall into the default position of the viewer upon which they are being presented through.

  17. <layout> Module (2) • <layout> states a group of regions where media elements are displayed through their position, size and scale. This is done through the <region> attribute. • A basic syntax for the <layout> element would look as follows: <layout> <root-layout backgroundColor=blue" width=300" height="350"/> <region id="PlaceItHere" top="20" left="30" width="80" height="100"/> </layout>

  18. Root Layout and Regions

  19. Code for Root Layout and Regions <smil> <head> <layout> <root-layout backgroundColor="blue" height="180" width="180"/> <region id="Region1" left="41" top="40" height="100" width="100" z-index="1" backgroundColor="yellow"/> <region id="Region2" left="0" top="0" height="180" width="180" z-index="0" backgroundColor="red"/> </layout> </head> </smil>

  20. Simple Validator

  21. <body> Element • The <body> element indicates what media elements to present as well as what regions they should be presented in, and also what the timeline should be for the different aspects. • Events that show up one after the other, or in sequence, use the <seq> and </seq> tags. • Parallel, or concurrent presentations use the <par> and </par> tags. <seq> <audio src= NumberThreeHit.mp3"/> <audio src= NumberTwoHit.mp3"/> <audio src= NumberOneHit.mp3"/> </seq>

  22. <switch> Element • Different elements can be presented to different viewers with <switch>. • The attributes under it are color depth, language, maximum data rate and language. <switch> <audio src= dutch.aiff" system-language="nl"/> <audio src= french.aiff" system-language="fr"/> <audio src= english.aiff" system-language="en"/> </switch>

  23. Linking Module • Within a SMIL presentation it is usual and customary to link to other SMIL or non-SMIL objects or plug-ins. • This also means different servers can be accessed simultaneously, both locally and externally. • Links are uni-directional, which means they are enabled to work in only one direction, target to source. • Also SMIL elements try to conform to the same language as Xlink with some differences depending on the type of media, as well as XHTML.

  24. <a> Linking • The <a> element , part of the SMIL 2.0 linking module, and also a part of SMIL 1.0 is the basis for hyperlinking in SMIL. • It ties together a link with any kind of media enabled visual object. These links, which must at least have the href attribute (similar to HTML’s href statement) and can link to either other SMIL internal and external presentations, Web pages, XML documents. <a href="NumberOneHit.mp3"> <ref id="NumberOne"…/> </a>

  25. <anchor> <area> Elements • In SMIL 1.0 <anchor> defined just a part of a media object’s display area to activate. In SMIL 2.0 this was expanded to include <area>. • Area in SMIL 2.0 is most useful in defining just a part or section of the presentation, something <anchor> could not do. <video src="NumberOneHit.mov" height="300" width="300"> <area id="NumberOneToday" shape=rect" cords="0,0, 200, 250" href="HitMovie.html"/> </video>

  26. The End

More Related