Synchronized Multimedia Interface Language SMIL and W 3
- Slides: 38
Synchronized Multimedia Interface Language (SMIL) and W 3 C Lecture 8, Multimedia E-Commerce Course November 15, 1999 Mike Christel and Alex Hauptmann Carnegie Mellon
World Wide Web Consortium • W 3 C, founded in October 1994: http: //www. w 3. org/ • Purpose: develop common protocols that promote WWW’s evolution and ensure its interoperability, in part by providing: – a repository of information about the WWW for developers and users, especially specifications about the Web – a sample code implementation to embody and promote standards – various prototype and sample applications to demonstrate use of new technology Carnegie Mellon
More on WC 3 • Directed by Tim Berners-Lee, inventor of the WWW • 370 Members as of 11/11/1999 – vendor-neutral forum – http: //www. w 3. org/Consortium/Member/List • Specifications must be formally approved by the membership – Working Draft, Proposed Recommendation, Recommendation – http: //www. w 3. org/Consortium/Process/ Carnegie Mellon
Some WC 3 Specifications • User Interface Domain Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), Document Object Model (DOM), SMIL • Technology and Society Domain Platform for Internet Content Selection (PICS), Resource Description Framework (RDF), Platform for Privacy Preferences (P 3 P) • Architecture Domain Hypertext Transfer Protocol (HTTP), Extensible Markup Language (XML). . . Follow links at http: //www. w 3. org/ for more details. . . Carnegie Mellon
XML: A Quick Introduction • XML is a method for putting structured data in a text file extensible, support for internationalization/localization, platform-independent • XML makes use of tags in ‘<‘ ‘>’ but is not HTML meaning of tags like “<p>” and attributes left to the application that reads it • XML is text, not binary, but is not meant to be read XML has strict parsing rules; more verbose that binary but zip/gzip, cheap storage, etc. minimize that disadvantage • XML is license-free, platform-independent and wellsupported W 3 C standard since February 1998 Carnegie Mellon
SMIL: Synchronized Multimedia Integration Language • SMIL 1. 0 specification, June 15, 1998, available at: http: //www. w 3. org/TR/REC-smil/ • W 3 C SMIL references available at: http: //www. w 3. org/Audio. Video/ • Purpose: a new language for scheduling multimedia presentations where audio, video, text and graphics are combined in real-time • Result: an XML application enabling authors to specify what should be presented when XML implies “extensible, support for internationalization and localization, platformindependent, editable by hand, etc. Carnegie Mellon
SMIL Timeline Oct 1996: Workshop Mar 1997: W 3 C working group on synchronized multimedia Jun 1998: W 3 C Recommendation (SMIL 1. 0) Sep 1998: Timed Interactive Multimedia Extensions for HTML (HTML+TIME), W 3 C Note http: //www. w 3. org/TR/NOTE-HTMLplus. TIME Feb 1999: 2 nd Working Group on Synchronized Multimedia (SYMM) formed http: //www. w 3. org/TR/NOTE-SYMM-modules Aug 1999: First working draft (SMIL “Boston”) released Carnegie Mellon
SMIL 1. 0 Modules • Structure • Meta (“who”, “what”) • Layout (“where”) • Timing and Synchronization (“when”) • Media Elements (“what”) • Linking • Content Control Carnegie Mellon
SMIL High Level Document Structure <smil> <head> <meta> <!-- … information about the document … --> </meta> <layout> <!-- … definitions used for the spatial layout … --> </layout> </head> <body> <!-- … objects, temporal relations, links … --> </body> </smil> Carnegie Mellon
SMIL 1. 0 Structure <smil> <head> </head> <body> </smil> These elements used in documents based upon traditional SMIL profiles. Carnegie Mellon
SMIL 1. 0 Meta <smil> <head> <meta … /> </head> </smil> The meta elements contain information describing the document, either to inform the human user or to assist some automation, e. g. , <meta name="title" content=”My Italy Trip"/> <meta name="copyright" content="© 1998 WGBH" /> <meta name="base” content="http: //billswin. edu/Italy/"/> Carnegie Mellon
SMIL 1. 0 Layout <smil> <head> <layout> <root-layout … /> <region id=“R 1” … /> <region id=“R 2” … /> </layout> </head> </smil> Includes the <layout>, <root-layout> and <region> elements, and related attributes. Carnegie Mellon
SMIL 1. 0 Layout Examples <root-layout height="300" width="450" backgroundcolor="#FFFFFF" title="Venezia!"/> <root-layout height="450" width="625" backgroundcolor="black"/> <region id="title" left="5" top="150" width="400" height="200" z-index="1"/> <region id="videoregion" top="0" left="0" height="240" width="352"/> Carnegie Mellon
SMIL 1. 0 Timing and Synchronization <smil> <body> <!-- … timing included here … --> </body> </smil> • Sequence and parallel timelines, via <seq> and <par> • Timing control properties, via “begin”, “end”, “repeat”, “dur” • “The accuracy of synchronization between the children in a parallel group is implementation-dependent” – “soft synchronization” vs. “hard synchronization” – how to realize hard synchronization Carnegie Mellon
Hard vs. Soft Synchronization • Hard synchronization: player synchronizes the children in the "par" (parallel play) element to a common clock • Soft synchronization: each child of the "par" element has its own independent clock audio video Hard sync. case 1: stop audio, e. g. , narrative & lip sync. Hard sync. case 2: drop video frames, e. g. , narrative audio video Soft sync: audio unaffected Carnegie Mellon
SMIL 1. 0 Media Elements <smil> <body> <!-- … media elements included here … --> </body> </smil> • Includes the media declaration elements <text>, <img>, <audio>, <video>, <textstream>, <animation>, and <ref> • all absolutely positioned elements (animation, img, ref, textstream and video) are contained within a single containing block defined by the root-layout element Carnegie Mellon
SMIL 1. 0 Linking <smil> <body> <!-- … linking included here … --> </body> </smil> • Includes the <a> and <anchor> elements, e. g. , <a href="http: //www. w 3 c. org" > <text src="media/w 3 c. txt" region="w 3 c” begin="14. 05 s" dur="15. 95 s" /> </a> • Timing applied to HTML <a> and <area> tags could provide much or all of SMIL functionality; hence, linking modules under review Carnegie Mellon
SMIL 1. 0 Content Control <smil> <head> <!-- … switch element can be used here … --> </head> <body> <!-- … switch element can be used here too … --> </body> </smil> Content control based on “<switch>” and test attributes: system-bitrate, system-captions, system-language, system-overdub-or-caption, system-required, system -screen-size, system-screen-depth Carnegie Mellon
Advantages of Content Control • Different connections may have different speeds system-bitrate • Different workstations may have different capabilities system-language, system-overdub-or-caption, systemrequired, system-screen-size, system-screen-depth • Different users may have different needs or media preferences system-captions, system-language, system-overdub-or -caption Carnegie Mellon
SMIL 1. 0 Example with <switch> <smil> <head> <switch> <meta name="title" content="CNN Skim, CC via Real. Text" systemcaptions="on"/> <meta name="title" content="CNN Skim, CC off by player request"/> </switch> <meta name="author" content="Mike Christel (using CNN footage)"/> <meta name="copyright" content="©Cable News Network" /> <switch> <layout system-captions="on"> <root-layout background-color="black" height="340" width="352" title="CNN Skim, CC via Real. Text"/> <region id="videoregion"" background-color="black" top="0" left="0" height="240" width="352"/> <region id="textregion"" top="245" left="10" height="90" width="330"/> </layout> <root-layout background-color="black" height="240" width="352" title="CNN Skim, CC off by player request"/> <region id="videoregion 1" background-color="black" top="0" left="0" height="240" width="352"/> </layout> </switch> </head> Carnegie Mellon
SMIL 1. 0 <switch> Example, Continued <body> <par> <!-- VIDEO --> <switch> <video src="cwv 0 t 4_skm. mpg" region="videoregion" system-captions="on"/> <video src="cwv 0 t 4_skm. mpg" region="videoregion 1"/> </switch> <!-- CAPTION --> <textstream src="CNNskim. rt" region="textregion" system-captions="on" dur="13 s" /> </par> </body> </smil> Carnegie Mellon
SMIL 1. 0 Modules, Revisited • Structure • Meta (“who”, “what”) • Layout (“where”) • Timing and Synchronization (“when”) • Media Elements (“what”) • Linking • Content Control …new versions of SMIL would update these modules, plus perhaps add the following Carnegie Mellon
Potential SMIL Enhancements • Layout (CSS) • Timing and Sync. : soft/hard sync. Performance • Transitions: wipes, fades, dissolves, etc. • Animation: motion paths, rendering filters like position, color, size, rotation • Resource Management: support for resource management hints, e. g. , considerations for bandwidth like preloading and setting priorities on media elements • Accessibility (closed captioning, audio descriptions, localization) http: //www. wgbh. org/wgbh/pages/ncam/webaccess/ captionedmovies. html#smil Carnegie Mellon
SMIL Status Today • SMIL 1. 0 as specification, with existing players: Real. Networks G 2 (http: //www. realnetworks. com/) Helio SOJA written in Java (http: //www. helio. org/) GRi. NS (http: //www. oratrix. com/GRi. NS/index. html) • SYMM Working Group work continues… HTML+TIME proposes a profile that extends an HTML 4. 0 profile to include Timing, Media, Linking and Content control modules Broadcast HTML (BHTML) proposes a profile that similarly extends HTML to include Timing, Media and Linking, as well as Transition support for broadcast applications Carnegie Mellon
SMIL Resources • Validator (not fully functional) http: //dejavu. cs. vu. nl/~symm/validator/ • Evaluator (streaming/bandwidth considerations) http: //www. realnetworks. com/devzone/library/creating/ smileval/index. html • Examples http: //www. realnetworks. com/devzone/library/creating/ smiltips/samples/index. html http: //www. webtechniques. com/archives/1998/09/bout hillier/ http: //www. wgbh. org/wgbh/pages/ncam/webaccess/ca ptionedmovies. html Carnegie Mellon
SMIL Online Tutorials • Helio tutorial http: //www. helio. org/products/smil/tutorial/ • Tutorial written in SMIL (might be slow) http: //www. empirenet. com/~joseram/index. html • Web Review tutorial http: //webreview. com/wr/pub/1999/03/12/feature/index. html Also, ACM MM Conf. SMIL Tutorial slides available as Postscript file via http: //www. cwi. nl/ftp/mmpapers/SMIL/Tutorial. ps. gz Carnegie Mellon
Attribution Slides that follow which contain graphics make use of the slides from the ACM MM Conf. SMIL tutorial slide set (see previous slide for location) by Lynda Hardman, Multimedia and Human-Computer Interaction Group, CWI: Centrum voor Wiskunde en Informatica, Amsterdam, The Netherlands; and Dick Bulterman, Jack Jansen, Sjoerd Mullender, Jacco van Ossenbruggen, Lloyd Rutledge, W 3 C SYMM working group Carnegie Mellon
Timing in SMIL • Time restricted to a single extent: start end duration <video src="the. news/mpeg/zoomin. mpv" clip-begin="smpte=00: 02: 30" clip-end="smpte=00: 02: 16: 41". . . /> Carnegie Mellon
Example Time Formats • SMPTE Timestamp (smpte, smpte-30 -drop, smpte-25) clip-begin="smpte=10: 12: 33: 20” • Normal Play Time clip-begin="npt=123. 45 s” clip-begin="npt=12: 05: 35. 3” • “dur” and “repeat” properties can be set to “indefinite” Carnegie Mellon
Layout in SMIL Carnegie Mellon
Layout Properties • Id • Background-color (default: transparent) • Fit (default: hidden) hidden, scroll, meet, slice, fill • Left, Top, Width, Height, in pixels or percentages <region id=”Diane" top="5%" left="50%" height="100%” width="100%" z-index=” 3” /> • Z-Index (default: 0) – specifies stacking level (highest number on top) – on ties, if B starts after A, B stacked on top of A; if B and A start simultaneously but B is lexically after A, then B stacked on top of A Carnegie Mellon
SMIL “fit” Attribute Carnegie Mellon
Example of Relative Timing in SMIL <par> <text src="leader_title. html" region="m_title" dur=” 5 s” /> <video id=”v 1” src="cnn. mpv” region="V" begin=” 1. 4 s” /> <audio src="cnn. aiff" region=”M" begin=”id(v 1)(0. 5 s)” /> </par> Audio is delayed until 0. 5 s after the start of video “v 1” Syntax of event-value is “id(id-value) (begin|end|clock-value)” Carnegie Mellon
End times to timelines in SMIL • End time of seq element is when its last child ends • By default, end time of par element is when its last child ends, but this can be specified otherwise: <par endsync=“first”> <audio src=“cnn. aiff” region=“M” /> <video src=“msnbc. mpv” region=“V” /> </par>. . or. . <par endsync=“id(item 23)”>. . . <video id=“item 23”. . . Carnegie Mellon
Anchor Element in SMIL • Analogous to HTML image maps • Link from portion of a media element (portion both in time and space) to a destination, or set portion of a media element as possible destination for a link <video src=”Video. In. Presentation. A"> <anchor href="http: //www. w 3. org/Pres. B#tim" show=“new” coords="0%, 50%, 50%"/> <anchor href="http: //www. w 3. org/Style" coords="50%, 100%, 100%"/> </video> <video src=”Video. In. Pres. B"> <anchor id=“opener” begin="0 s" end="5 s"/> <anchor id=“tim" begin=” 5 s" end=” 10 s"/> </video> Carnegie Mellon
“show” Attribute in SMIL The “show” attribute controls the behavior of the source document containing the link when the link is followed – replace: the current presentation is paused at its current state and is replaced by the destination resource. – new: presentation of the destination resource starts in a new context, not affecting the source resource – pause: The source presentation is paused at its current state, and the destination resource starts in a new context. When the display of the destination resource ends, the source presentation resumes from the state in which it was paused. Carnegie Mellon
Recommended SMIL Online Articles • Larry Bouthillier, “Synchronized Multimedia On The Web, ” Web. Techniques, Sep. 1998 http: //www. webtechniques. com/archives/1998/09/ bouthillier/ • Lloyd Rutledge, “Moving to the beat, ” i. X: MAGAZIN FÜR PROFESSIONELLE INFORMATIONSTECHNIK, Oct. 1999 http: //www. heise. de/ix/artikel/E/1999/10/058/default. s html Carnegie Mellon
For More Details. . . • SMIL today at http: //smw. internet. com/smil/news/ • Check URLs referenced here • View other online SMIL tutorials • Use products that are newly released or soon to be released, e. g. , – Real. Slideshow at http: //proforma. real. com/rn/tools/slideshow/index. html – GRi. NS at http: //www. oratrix. com/GRi. NS/Download/down-sw 1. html Carnegie Mellon
Sophos synchronized security heartbeat products
Simv
Porters generiske strategier
Smil
Smil head layout root-layout
Smil head layout root-layout
Smil 2
Det skjeve smil i rosa
Example of non-linear multimedia
What is interface in java
User led through interaction via series of questions
Office interface vs industrial interface
An interface
Multimedia becomes interactive multimedia when
Csc253
Esa multimedia.esa.int./multimedia/virtual-tour-iss
What is xul
Advantages and disadvantages of menu driven interface
Speech/natural language interface
Comprehensible input
Difference between second language and foreign language
Language
Assembly vs high level language
Difference between assembly language and machine language
Language
Formal and informal language in automata
Scienze della formazione
Difference of first language and second language
Difference of first language and second language
Implicational universals examples
Characteristic of informal language
Literal versus figurative language
Animals and human language شرح
Happy harry handles handsprings horribly.
User interface analysis and design
Ideal polarized electrode
Parallel communication in 8051
Interfaces are syntactically similar to
Programming toolkits in hci
