1 / 14

SMIL Synchronised Multimedia Integration Language Kevin McManus

SMIL Synchronised Multimedia Integration Language Kevin McManus. SMIL. Synchronised Multimedia Integration Language XML based Single timeline to coordinate and synchronize mixed media Developed by W3C First released June1998 Supported by Real Systems Not supported by the major browsers.

sunee
Download Presentation

SMIL Synchronised Multimedia Integration Language Kevin McManus

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. SMILSynchronised Multimedia Integration LanguageKevin McManus the University of Greenwich

  2. SMIL • Synchronised Multimedia Integration Language • XML based • Single timeline to coordinate and synchronize mixed media • Developed by W3C • First released June1998 • Supported by Real Systems • Not supported by the major browsers the University of Greenwich

  3. Documentation and Tutorials • Lots of resources on the Web: • W3C • Real Systems • W3Schools – not in line with the standerds • Streaming Media World • Larry Bouthillier's SMIL Tutorial Page (“Canyonlands - What I Did Last Summer”) • The excellent Helio SMIL tutorial seems to have evaporated • Real Systems production guide • covers media production and touches on other proprietary markup languages (RealPix, RealText). the University of Greenwich

  4. SMIL File Structure • SMIL .smi file has an optional head followed by a body <smil> <head> ...optional section with header markup... </head> <body> ...required section with body markup... </body></smil> the University of Greenwich

  5. SMIL Tags <par> ... </par> Markup between these tags clips play in parallel. <seq> ... </seq> Markup between these tags clips play in sequence. <text ... /> Specifies a RealText (.rt) clip <img ... /> Specifies a RealPix (.rp) clip. the University of Greenwich

  6. SMIL Tags <audio ... /> Specifies a RealAudio (.rm) clip <video ... /> Specifies a RealVideo (.rm) clip. <switch>... </switch> Specifies a choice Looping may be done with seq, e.g. <seq repeat="3"> ... </seq> the University of Greenwich

  7. Pointer Files • Instead of a link like: <a href="webtech.smi">Canyonlands</a> • we need an intermediate pointer file <a href="webtech.ram">Canyonlands</a> • wherewebtech.ramcontains the url of the real media, e.g: http://www.example.com/media/webtech.smi • This can optionally include parameters the University of Greenwich

  8. Accessing SMIL • Not fully supported by major browsers • apart from Real Player (RealOne) • Need to use a helper or plug-in • a simple anchor tag will cause the browser to spawn the appropriate helper • use <object> to embed the plug-in into a web page • Preferably without <embed> the University of Greenwich

  9. mugshots.smi define a window <smil> <head> <layout> <root-layout height="450" width="640" background-color="black"/> <region id="slides" left="0" top="25" height="400" width="360"/> <region id="toc" left="350" top="0" height="450" width="280"/> </layout> </head> <body> <par> <text src="toc.rt" region="toc"/> <img src="slideshow.rp" region="slides"/> <audio src="ShostakovichPrelude15.rm"/> </par> </body> </smil> area for pictures area for text play in parallel play text into the text area play slideshow into the picture area play music the University of Greenwich

  10. toc.rt <window duration="0:58.0" height="450" width="280" bgcolor="black" link="#EEDDCC" > <center> <p> <font size="5" color="white" face="times"> <pos y="10"/><a href="command:seek(00:00)" target="_player"> <i><b>Illustrious Members of Staff</b></i></a> </font> <br/><br/> <font size="4" color="white" face="times"> <time begin ="00:01"/> <a href="command:seek(00:01)" target="_player">Kevin McManus</a> <br/><br/> <snip> more content in here </snip> <time begin="00:41"/> And, Last but not Least...<br/> <a href="command:seek(00:41.5)" target="_player"><b>GILL WINDALL</b></a> </p> </font> </center> </window> content displayed immediately time that the content is displayed anchor takes the user to a place on the timeline the University of Greenwich

  11. slideshow.rp <imfl> <head duration="00:56" bitrate="20000" width="360" height="400" aspect="true" timeformat="dd:hh:mm:ss.xyz" /> <image handle="1" name="KevinMcManus.jpg"/> <image handle="2" name="RodneySue.jpg"/> <image handle="3" name="LizBacon.jpg"/> <image handle="4" name="KateFinney.jpg"/> <image handle="5" name="RichardJones.jpg"/> <image handle="6" name="AlexFedorec.gif"/> <image handle="7" name="DilwynEdwards.jpg"/> <image handle="8" name="PhilClipsham.jpg"/> <image handle="9" name="GillWindall.jpg"/> <fadein start="00:01" duration="0:02.5" target="1"/> <crossfade start="00:05" duration="00:02.5" target="2"/> <crossfade start="00:10" duration="00:02.5" target="3"/> <crossfade start="00:15" duration="00:02.5" target="4"/> <crossfade start="00:20" duration="00:02.5" target="5"/> <crossfade start="00:25" duration="00:02.5" target="6"/> <crossfade start="00:30" duration="00:02.5" target="7"/> <crossfade start="00:35" duration="00:02.5" target="8"/> <crossfade start="00:40" duration="00:02.5" target="9"/> <fadeout start="00:45.5" duration="00:10.5" target="9"/> </imfl> this is all fairly self explanatory the University of Greenwich

  12. anchor to mugshots.ram http://staffweb.cms.gre.ac.uk/~mk05/web/streaming/Mugshots/mugshots.ram the University of Greenwich

  13. Adapting to system variations • SMIL <switch> allows decisions to be made at runtime • Deliver content based on the available bandwidth or the client nationality <switch> <img src="slides.rp" region="full" system-bitrate="45000"/> <img src="slides_low.rp" region="full" system-bitrate="20000"/> </switch> <switch> <audio src="french/seattle.rm" system-language="fr"/> <audio src="german/seattle.rm" system-language="de"/> <audio src="english/seattle.rm"/> </switch> the University of Greenwich

  14. Conclusions • Mugshots illustrates how simple SMIL can effectively integrated media • can forgive it’s little markup irregularities • Canyonlands shows how to incorporate video clips into SMIL • Use SMIL to create interactive media experiences • If only SMIL worked in more browsers • without the need for a plug in • rumour has it that IE can do this • W3C plan to allow SMIL, SVG and MathML to integrate into XHTML the University of Greenwich

More Related