SMIL

2,311 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,311
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
80
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

SMIL

  1. 1. <SMIL> S ynchronized M ultimedia I ntegration L anguage Martin Wolpers & Erik Duval
  2. 2. http://www.multimedia4everyone.com/smil_intro/smil_intro_direct.smil
  3. 3. Introduction <ul><li>S imple authoring </li></ul><ul><ul><li>Simple text editor </li></ul></ul><ul><li>Free and open </li></ul><ul><li>I nteractive audiovisual presentations </li></ul><ul><li>&quot;rich media&quot;/multimedia presentations </li></ul><ul><ul><li>streaming audio and video , images, text , etc. </li></ul></ul><ul><li>SMIL 1.0: 15 June 1998 (30 pages) SMIL 2.0: 07 August 2001 (540 pages) SMIL 2.1: 27 September 2005 (386 pages) </li></ul><ul><li>Parties involved </li></ul><ul><ul><li>RealNetworks, Intel, Philips, CWI , Nokia, ... </li></ul></ul>
  4. 4. Introduction (Cont’d) <ul><li>SMIL is XML </li></ul><ul><ul><li>DTD, Schema </li></ul></ul><ul><ul><li>Set of modules </li></ul></ul><ul><li>Integration language </li></ul><ul><ul><li>Media referred to, not included </li></ul></ul><ul><li>Profiles </li></ul><ul><ul><li>SMIL Basic </li></ul></ul><ul><ul><ul><li>Mobile devices </li></ul></ul></ul><ul><ul><li>XHTML+SMIL </li></ul></ul><ul><ul><ul><li>Timing for text </li></ul></ul></ul>
  5. 5. Implementations <ul><li>RealNetworks </li></ul><ul><ul><li>RealOne ( SMIL 2.0 ) </li></ul></ul><ul><li>Oratrix </li></ul><ul><ul><li>GRiNS player and editor </li></ul></ul><ul><li>Microsoft </li></ul><ul><ul><li>Internet Explorer > 5.5 : XHMTL+SMIL </li></ul></ul><ul><li>Apple </li></ul><ul><ul><li>QuickTime > 4.1 : SMIL 1.0 </li></ul></ul><ul><li>Adobe </li></ul><ul><ul><li>SVG Viewer : animation in SVG </li></ul></ul>
  6. 6. A simple SMIL document <ul><li><?xml version=&quot;1.0&quot;?> </li></ul><ul><li><!DOCTYPE smil PUBLIC &quot;-//W3C//DTD SMIL 2.0//EN&quot; &quot;http://www.w3.org/2001/SMIL20/SMIL20.dtd&quot;> </li></ul><ul><li>< smil xmlns=&quot;http://www.w3.org/2001/SMIL20/Language&quot; xml:lang=&quot;en&quot; title=&quot;SMIL example&quot; > </li></ul><ul><li>< head > </li></ul><ul><li></ head > </li></ul><ul><li>< body > </li></ul><ul><li></ body > </li></ul><ul><li></ smil > </li></ul><ul><li>example : http://www. yomiuri .co. jp/stream/hotels/e_smil/torino . smi </li></ul>
  7. 7. Media types <ul><li><text src=“…” region=“…”> </li></ul><ul><ul><li>Plain text (txt, ascii, …) </li></ul></ul><ul><li><textstream src=“…” region=“…”> </li></ul><ul><ul><li>stream, with timing (newsticker, subtitles, …) </li></ul></ul><ul><li><img src=“…” region=“…”> </li></ul><ul><ul><li>As in HTML (GIF, JPEG, PNG, …) </li></ul></ul><ul><li><audio src=“…”> </li></ul><ul><ul><li>(MP3, WAV, AU, …) </li></ul></ul><ul><li><video src=“…” region=“…”> </li></ul><ul><ul><li>RealMovie, AVI, MPEG, MOV </li></ul></ul><ul><li><animation src=“…” region=“…”> </li></ul><ul><ul><li>Vector graphics (SVG, SWF, VML, …) </li></ul></ul>
  8. 8. Synchronization: intro <ul><li>http://www.cwi.nl/~media/SMIL/Tutorial/SMILTut.html </li></ul>
  9. 9. Synchronization and clipping <ul><li>Synchronization </li></ul><ul><ul><li><img src =“…” dur=&quot;6s&quot; /> </li></ul></ul><ul><ul><ul><li>Last 6 seconds </li></ul></ul></ul><ul><ul><li><img src=“…” begin=“2s” /> </li></ul></ul><ul><ul><ul><li>After two seconds </li></ul></ul></ul><ul><li>Clipping </li></ul><ul><ul><li><video src=&quot;movie.mpg&quot; clipBegin=&quot;20s&quot; /> </li></ul></ul><ul><ul><ul><li>Starting 20 seconds into the video </li></ul></ul></ul><ul><ul><li><video src=&quot;movie.mpg&quot; clipEnd=&quot;26:30&quot; /> </li></ul></ul><ul><ul><ul><li>Cutting out the last scene </li></ul></ul></ul><ul><ul><li><video src=&quot;m.mpg&quot; clipBegin=&quot;4:55.7&quot; clipEnd=&quot;4:55.7&quot; /> </li></ul></ul><ul><ul><ul><li>Showing 7th frame after 4:55 </li></ul></ul></ul>
  10. 10. Example: finalmove.smil <ul><li><smil> </li></ul><ul><li>< body> </li></ul><ul><li><video src=&quot;board.rm” </li></ul><ul><li> clip-begin=&quot;16s” </li></ul><ul><li> clip-end=&quot;27s&quot;/> </li></ul><ul><li>< /body> </li></ul><ul><li></smil> </li></ul>http://smil.ylog.org/download.html
  11. 11. <Seq> <ul><li>Children executed after one another </li></ul><ul><li><seq> </li></ul><ul><li>< img src = &quot;vim32x32.gif“ alt = &quot;The vim icon“ region = &quot;vim_icon“ dur = &quot;6s&quot; /> </li></ul><ul><li>< img src = &quot;madewithsoja.gif“ alt = &quot;Made with SOJA“ region = &quot;soja_icon“ dur = &quot;4s&quot; begin = &quot;1s&quot; /> </li></ul><ul><li></seq> </li></ul>
  12. 12. <par> <ul><li>Children are executed in parallel, starting at same time, i.e. start time of <par> </li></ul><ul><li><par> </li></ul><ul><li>< img src = &quot;vim32x32.gif“ alt = &quot;The vim icon“ region = &quot;vim_icon“ dur = &quot;6s&quot; /> </li></ul><ul><li>< img src = &quot;madewithsoja.gif“ alt = &quot;Made with SOJA“ region = &quot;soja_icon“ dur = &quot;6s&quot; /> </li></ul><ul><li></par> </li></ul>
  13. 13. <par> (2) <ul><li><par>     <text src=“ x .html&quot; region=&quot;t&quot; dur=&quot;5s&quot; />     <video src=“ y .mpv&quot; region=&quot;main&quot; />     <audio src=“ z .aiff&quot; region=&quot;music&quot; /> </li></ul><ul><li></par> </li></ul>
  14. 14. <par> and <seq> together <ul><li><seq> </li></ul><ul><li><par> </li></ul><ul><li> <text src=“ x .html&quot; region=&quot;title&quot; dur=&quot;5s&quot; />         <video src=“ y .mpv&quot; region=&quot;main&quot; />         <audio src=“ z .aiff&quot; region=&quot;music&quot; /> </li></ul><ul><li></par> </li></ul><ul><li>    <par>         <text src=“ a .html“ region=&quot;title&quot; dur=&quot;2s&quot; />         <video src=“ b .mpv&quot; region=&quot;main&quot; />         <audio src=“ c .aiff“ region=&quot;music&quot; /> </li></ul><ul><li></par> </li></ul><ul><li></seq> </li></ul>
  15. 15. Event based synchronization <ul><li><par> </li></ul><ul><li><audio src=&quot;ad_music.mp3&quot; alt=&quot;subliminal advertising enhancer&quot;/> <seq>     <video src=&quot;ad1.mpg&quot;/>     <video src=&quot;ad2.mpg&quot; begin=&quot;00:02&quot;/>     <video src=&quot;ad3.mpg&quot; begin=&quot;00:02&quot;/> </seq> </li></ul><ul><li></par> </li></ul><par> <audio src=&quot;ad_music.mp3&quot;/> <video src=&quot;ad1.mpg“/> <video src=&quot;ad2.mpg&quot; begin=&quot;00:17&quot;/> <video src=&quot;ad3.mpg&quot; begin=&quot;00:34&quot;/> </par> <par> <audio src=&quot;ad_music.mp3&quot;/> <video id=&quot; ad1 &quot; src=&quot;ad1.mpg&quot;/> <video id=&quot; ad2 &quot; src=&quot;ad2.mpg&quot; begin=&quot; ad1 .end+00:02&quot;/> <video id=&quot;ad3&quot; src=&quot;ad3.mpg&quot; begin=&quot; ad2 .end+00:02&quot;/> </par> ad_music.mp3
  16. 16. Event based synchronization <ul><li>< img src = “ 1 .gif&quot; id = “ x &quot; … /> < img src = “ 2 .gif&quot; begin = &quot; id( x )( 3 s ) &quot; … /> </li></ul><ul><ul><li>2.gif starts 3 seconds after 1.gif </li></ul></ul><ul><li>< img src = “ 1 .gif&quot; id = “ x &quot; … /> < img src = “ 2 .gif&quot; begin = &quot; id( x )( begin ) &quot; … /> </li></ul><ul><ul><li>2.gif starts at same time as 1.gif </li></ul></ul><ul><li>< img src = “ 1 .gif&quot; id = “ x &quot; … /> < img src = “ 2 .gif&quot; begin = &quot; id( x )( end ) &quot; … /> </li></ul><ul><ul><li>2.gif starts when 1.gif ends </li></ul></ul>
  17. 17. Repeat <video src=“z.mpv&quot; repeatCount=&quot;3&quot; /> <video src=“z.mpv&quot; repeatDur=&quot;11s&quot; /> <video src=“z.mpv&quot; repeatCount=&quot;3.2&quot; /> <video src=“z.mpv&quot; repeatCount=“indefinite&quot; />
  18. 18. Multiple begin’s <ul><li><par> </li></ul><ul><li><audio id=&quot;ring&quot; src=&quot;ring.wav&quot; repeatCount=&quot;4&quot;/> </li></ul><ul><li><img src=&quot;jumping_phone.gif&quot; begin=&quot;0; ring.repeat&quot; /> </li></ul><ul><li></par> </li></ul><ul><li>1 st ring doesn’t count as repeat </li></ul><ul><li>Audio repeats , image restarts </li></ul>
  19. 19. Layout <ul><li>Rectangular areas </li></ul><ul><li>Process </li></ul><ul><ul><li>Create regions </li></ul></ul><ul><ul><li>Place media in regions </li></ul></ul><ul><li>Region attributes </li></ul><ul><ul><li>Width, height </li></ul></ul><ul><ul><li>left, right, top, bottom </li></ul></ul><ul><ul><li>backgroundColor, showBackground </li></ul></ul><ul><ul><li>fit </li></ul></ul><ul><ul><li>regionName </li></ul></ul><ul><ul><li>z-index </li></ul></ul><ul><li>Measurements </li></ul><ul><ul><li>relative values (px, em, or ex) </li></ul></ul><ul><ul><li>absolute values (cm, mm, in, pt, or pc) </li></ul></ul><ul><ul><li>percentages. </li></ul></ul>
  20. 20. Layout tags <ul><li>Root screen: </li></ul><ul><ul><li>< root-layout width = &quot;300&quot; height = &quot;200“ background-color = &quot;white&quot; /> </li></ul></ul><ul><li>Absolute positioning </li></ul><ul><ul><li>75 pixels from left border and 50 pixels from top border </li></ul></ul><ul><ul><li>Head: < region id = &quot; vim_icon “ left = &quot;75&quot; top = &quot;50“ width = &quot;32&quot; height = &quot;32&quot; /> </li></ul></ul><ul><ul><li>Body: < img src = &quot;vim.gif“ alt= &quot;The vim icon“ region = &quot; vim_icon &quot; /> </li></ul></ul>
  21. 21. Layout tags (2) <ul><li>Relative positioning </li></ul><ul><ul><li>50% from left border and 40% from top border </li></ul></ul><ul><ul><li>Head: < region id = &quot; vim_icon &quot; left = &quot;50%&quot; top = &quot;40%&quot; width = &quot;32&quot; height = &quot;32&quot; /> </li></ul></ul>
  22. 22. Example: threecams.smil <ul><li><smil> </li></ul><ul><li>< head> </li></ul><ul><li><layout> </li></ul><ul><li><root-layout width=&quot;1080&quot; height=&quot;240&quot;/> </li></ul><ul><li><region id=&quot;video_left&quot; width=&quot;360&quot; height=&quot;240&quot; left=&quot;0&quot; top=&quot;0&quot;/> </li></ul><ul><li><region id=&quot;video_center&quot; width=&quot;360&quot; height=&quot;240&quot; left=&quot;360&quot; top=&quot;0&quot;/> </li></ul><ul><li><region id=&quot;video_right&quot; width=&quot;360&quot; height=&quot;240&quot; left=&quot;720&quot; top=&quot;0&quot;/> </li></ul><ul><li></layout> </li></ul><ul><li>< /head> </li></ul><ul><li>< body> </li></ul><ul><li><par dur=&quot;30s&quot;> </li></ul><ul><li><video src=&quot;black.rm&quot; clip-begin=&quot;1.09s&quot; region=&quot;video_left&quot;/> </li></ul><ul><li><video src=&quot;board.rm&quot; clip-begin=&quot;0s&quot; region=&quot;video_center&quot;/> </li></ul><ul><li><video src=&quot;white.rm&quot; clip-begin=&quot;1.10s&quot; region=&quot;video_right&quot;/> </li></ul><ul><li></par> </li></ul><ul><li>< /body> </li></ul><ul><li></smil> </li></ul>
  23. 23. Layout tags (3) <ul><li>< head > < layout > </li></ul><ul><li>< region id = &quot;region_1“ left = &quot;50&quot; top = &quot;50“ width = &quot;150&quot; height = &quot;125“ z-index=&quot;2&quot; /> < region id = &quot;region_2“ left = &quot;25&quot; top = &quot;25“ width = &quot;100“ height = &quot;100“ z-index=&quot;1&quot; /> </li></ul><ul><li></ layout > </ head > < body > < par > </li></ul><ul><li>< text src = &quot;text1.txt“ region = &quot;region_1&quot; /> </li></ul><ul><li>< text src = &quot;text2.txt“ region = &quot;region_2&quot; /> </li></ul><ul><li></ par > </ body > </ smil > </li></ul>
  24. 24. Fit=“Fill” <ul><li>Aspect ratio not preserved <region id=&quot;region_1&quot; … fit=&quot;fill&quot; /> </li></ul>
  25. 25. Fit=“Meet” <ul><li>Aspect ratio preserved </li></ul><ul><li><region id=&quot;region_1&quot; … fit=“ meet &quot; /> </li></ul>
  26. 26. Fit=“Slice” <ul><li>Aspect ratio preserved </li></ul><ul><li><region id=&quot;region_1&quot; … fit=“ slice &quot; /> </li></ul>
  27. 27. Fit=“Scroll” <ul><li><region id=&quot;region_1&quot; … fit=“ scroll &quot; /> </li></ul>
  28. 28. Example <ul><li><?xml version=&quot;1.0&quot;?> </li></ul><ul><li><!DOCTYPE smil PUBLIC &quot;-//W3C//DTD SMIL 2.0//EN&quot; &quot;http://www.w3.org/2001/SMIL20/SMIL20.dtd&quot;> </li></ul><ul><li><smil xmlns=&quot;http://www.w3.org/2001/SMIL20/Language&quot; xml:lang=&quot;en&quot; title=&quot;Picture-in-Picture Television&quot;> </li></ul><ul><li><head> </li></ul><ul><li><layout> </li></ul><ul><li><topLayout width=&quot;320px&quot; height=&quot;240px&quot;> </li></ul><ul><li>< region id=&quot; main &quot; left=&quot;0%&quot; top=&quot;0%&quot; width=&quot;100%&quot; height=&quot;100%&quot; > </li></ul><ul><li><region id=&quot; c &quot; left=&quot;67%&quot; top=&quot;67%“ width=&quot;33%&quot; height=&quot;33%&quot; fit=&quot;scale&quot; /> </li></ul><ul><li></ region > </li></ul><ul><li></topLayout> </li></ul><ul><li></layout> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><ul><li><par> </li></ul></ul><ul><ul><li><video id=&quot;chameleon&quot; src=&quot;c.mpg&quot; region=&quot; main &quot;/> </li></ul></ul><ul><ul><li><video id=&quot;earthquake&quot; src=&quot;e.mpg&quot; region=&quot; c &quot; end=&quot;chameleon.end&quot;/> </li></ul></ul><ul><ul><li></par> </li></ul></ul><ul><li></body> </li></ul><ul><li></smil> </li></ul>
  29. 29. Links in SMIL <ul><li><a show =“new” href=“ … ”> </li></ul><ul><li><video src=&quot;zoomin.mpg&quot; region=&quot;V-Main&quot;/> </li></ul><ul><li></a> </li></ul><ul><li>show : New, Replace (default) </li></ul><ul><li>destinationPlaystate : play (default), pause </li></ul><ul><li>sourcePlaystate : play, stop, pause </li></ul><ul><li>target : region </li></ul>
  30. 30. Example <ul><li><head> </li></ul><ul><ul><li><layout> </li></ul></ul><ul><ul><ul><li><topLayout width=&quot;320px&quot; height=&quot;272px&quot; backgroundColor=&quot;#FFFFFF&quot;> </li></ul></ul></ul><ul><ul><ul><ul><li><region id=&quot;main&quot; left=&quot;0px&quot; top=&quot;0px&quot; width=&quot;320px&quot; height=&quot;240px&quot;/> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><region id=&quot;navbar&quot; left=&quot;112px&quot; top=&quot;240px&quot; width=&quot;96px&quot; height=&quot;32px&quot;> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><region id=&quot;left&quot; left=&quot;0px&quot; top=&quot;0px&quot; width=&quot;32px&quot; height=&quot;100%&quot;/> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><region id=&quot;middle&quot; left=&quot;32px&quot; top=&quot;0px&quot; width=&quot;32px&quot; height=&quot;100%&quot;/> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><region id=&quot;right&quot; left=&quot;64px&quot; top=&quot;0px&quot; width=&quot;32px&quot; height=&quot;100%&quot;/> </li></ul></ul></ul></ul><ul><ul><ul><ul><li></region> </li></ul></ul></ul></ul><ul><ul><ul><li></topLayout> </li></ul></ul></ul><ul><ul><li></layout> </li></ul></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><ul><li><par dur=&quot;indefinite&quot;> </li></ul></ul><ul><ul><ul><li><par dur=&quot;indefinite&quot;> </li></ul></ul></ul><ul><ul><ul><ul><li><a href=&quot;#info&quot;><img src=&quot;info.png&quot; alt=&quot;info button&quot; region=&quot;left&quot;/></a> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><a href=&quot;#warning&quot;><img src=&quot;warning.png&quot; alt=&quot;warning button&quot; region=&quot;middle&quot;/></a> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><a href=&quot;#feature&quot;><img src=&quot;play.png&quot; alt=&quot;play button&quot; region=&quot;right&quot;/></a> </li></ul></ul></ul></ul><ul><ul><ul><li></par> </li></ul></ul></ul><ul><ul><ul><li><excl> </li></ul></ul></ul><ul><ul><ul><ul><li><text id=&quot;info&quot; src=&quot;info.txt&quot; alt=&quot;information&quot; region=&quot;main&quot; dur=&quot;indefinite&quot;/> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><text id=&quot;warning&quot; src=&quot;warning.txt&quot; alt=&quot;FBI warning&quot; region=&quot;main&quot; dur=&quot;indefinite&quot;/> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><video id=&quot;feature&quot; src=&quot;chameleon.mpg&quot; alt=&quot;feature presentation&quot; region=&quot;main&quot;> </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li><area href=&quot;http://www.archive.org/&quot; alt=&quot;Archive&quot; begin=&quot;0&quot; dur=&quot;15s&quot;/> </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li><area href=&quot;http://www.siggraph.org/&quot; alt=&quot;Siggraph&quot; begin=&quot;15s&quot; dur=&quot;indefinite&quot;/> </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li></video> </li></ul></ul></ul></ul><ul><ul><ul><li></excl> </li></ul></ul></ul><ul><ul><li></par> </li></ul></ul><ul><li></body> </li></ul>
  31. 31. <switch> <ul><li>< body >< switch > </li></ul><ul><li><!-- French *AND* if a bitrate greater than 28000 --> </li></ul><ul><li>< text src = “ 1 .txt&quot; system-language = &quot;fr“ system - bitrate = &quot;28000&quot; /> </li></ul><ul><li><!-- French *AND* if a bitrate greater than 14 000 --> </li></ul><ul><li>< text src = “ 2 .txt&quot; system-language = &quot;fr“ system-bitrate = &quot;14000&quot; /> </li></ul><ul><li><!-- English *AND* if a bitrate greater than 28000 --> </li></ul><ul><li>< text src = “ 3 .txt&quot; system-language = &quot;en“ system-bitrate = &quot;28000&quot; /> </li></ul><ul><li><!-- English *AND* if a bitrate greater than 14000 --> </li></ul><ul><li>< text src = “ 4 .txt&quot; system-language = &quot;en“ system-bitrate = &quot;14000&quot; /> </li></ul><ul><li></ switch ></ body > </li></ul>
  32. 32. <switch> (2) <ul><li>< XXX system-language = &quot;fr,en,it&quot; > </li></ul><ul><li>< XXX system-bitrate = &quot;14000&quot; > </li></ul><ul><li>< XXX system-screen-size = &quot;800X600&quot; > </li></ul><ul><li>< XXX system-screen-depth = &quot;4&quot; > </li></ul><ul><li>< XXX system-captions = &quot; on , off &quot; > </li></ul><ul><li>< XXX system-captions = &quot; overdub , caption &quot; > </li></ul><ul><li>< XXX type = &quot;audio/x-auz&quot; > </li></ul><ul><ul><li>MIME type </li></ul></ul>
  33. 33. Also <ul><li>Animations </li></ul><ul><li>Transition effects </li></ul><ul><li>Media object portions for link sources and destinations </li></ul><ul><li>Pre-fetching of media </li></ul><ul><li>VCR-type controls </li></ul><ul><li>Etc. etc. </li></ul>
  34. 34. Tools <ul><li>Ambulant </li></ul><ul><ul><li>http://www.cwi.nl/projects/Ambulant/ </li></ul></ul><ul><ul><li>Source code </li></ul></ul><ul><ul><li>Installers </li></ul></ul><ul><li>RealPlayer </li></ul><ul><ul><li>http://www.real.com/ </li></ul></ul><ul><ul><li>http://service.real.com/help/library/guides/production8/htmfiles/smil.htm </li></ul></ul>
  35. 35. References <ul><li>Official home </li></ul><ul><ul><li>http://www.w3.org/AudioVideo/ </li></ul></ul><ul><ul><li>Includes “getting help” </li></ul></ul><ul><li>Tutorials </li></ul><ul><ul><li>http://www.cwi.nl/~media/SMIL/Tutorial/SMILTut.html </li></ul></ul><ul><ul><li>http://www. webtechniques .com/archives/1998/09/bouthillier/ </li></ul></ul>

×