Defining Structure Metadata and Layout
1 like503 views
The document provides guidelines and rules for structuring, authoring, and embedding SMIL (Synchronized Multimedia Integration Language) files, including: - The basic structure of a SMIL file includes a <head> section for metadata and a <body> section for content and timing. - Layout is defined using <layout> and <region> elements to position visual media elements. - Namespaces must be declared to support extensions from companies like Apple and RealNetworks. - Metadata can be included using <meta> tags to provide information for search engines. - SMIL content can be embedded in HTML pages using XHTML+TIME.
Defining Structure Metadata and Layout
- 1. 5 Defining Structure, Metadata and Layout Building the Outline
- 2. 5.1 About a SMIL File Can be read by humans! Create with any text editor Depends on the language implementation Host Language provides self-contained file Basic structure is similar to HTML Filename extension is .smil Using .smi can cause problems with MIME types Integration Set embeds SMIL timing and synchronisation within HTML Basic structure is HTML SMIL integration ignored by non-supporting browsers Filename extension is . htm .html
- 3. 5.2 Design Guidelines Always observe copyright law No rights to media under Copyright Licensing Agency agreements for UK HEI For audio check with Mechanical Copyright Protection Society Copyright violation can be very costly Create images, video and audio Consult with Audio Visual Services (AVS) Do initial design on paper or in drawing package Assemble assets in an organised file system Note down ideas seen on TV and in other media Remember to backup work frequently!
- 4. 5.3 SMIL Authoring Rules & Guidelines Comment and indent to aid readability <!-- use HTML comments --> SMIL is an XML based language so case matters Elements and attributes use lower or camel case ( camelCase ) <layout> <fadeColor> Exceptions such as <root-layout> Attribute values are enclosed in “double quotes” dur=“25s” Binary elements have a closing element <par></par> Unary elements must close with a forward slash <region id=“”… /> Some elements can be both binary or unary <t:img> … </t:img> or <t:img …/> Observe case in filepath names <audio src=“edlectures/SEAMUS.rm”> not the same as <audio src=“edlectures/seamus.rm”>
- 5. 5.4 Structure of a SMIL file xmlns attribute defines the XML namespace Not required for SMIL 1.0 applications URL used as a unique identifier it is not accessed by the client <head> section is optional – usually included <meta> tags used to provide metainformation for clients <body> lists content and order of its presentation <smil xmlns ="http://www.w3.org/2001/SMIL20/Language"> <head> <!-- Metadata definitions go here --> <meta … /> <layout> <!– Layout of presentation is defined here --> </layout> </head> <body> <!– Timing and content of presentation defined here --> </body> </smil>
- 6. 5.5 QuickTime SMIL Extensions Must declare if presentation uses QT SMIL extensions QuickTime SMIL Extensions are documented at http://www.apple.com/quicktime/authoring/qtsmil2.html Complete QuickTime and SMIL documentation at http://developer.apple.com/documentation/QuickTime/IQ_InteractiveMovies/quicktimeandsmil/chapter_10_section_1.html URL used as a unique identifier Identifier is not accessed by the client Some attributes set for the <smil> element autoplay , next Other attributes are set for media elements: <video>, <img> and <audio> chapter , immediate-instantiation <smil xmlns:qt= http:// www.apple.com/quicktime/resources/smilextensions ” qt:autoplay=“true” qt:next=“part6.smil”> ... </smil>
- 7. 5.6 RealNetwork SMIL Extensions RealNetworks provides an extensive list of extensions to SMIL 2 Used in addition to standard namespace declaration for SMIL2 Must declare namespace(s) if SMIL code uses RN extensions Declaration does not require that namespace is used Prefix relates attribute to a specific namespace rn : calls extensions for effects cv : calls extensions for checking the version of the player Can be used to: Switch between SMIL1 and SMIL2 content based on client version or screen resolution Manipulate image transparency Referenced as prefix:attribute=“value” e.g. rn:mediaOpacity=“50%” Can use an alternative prefix to “rn” for calling extensions Extensions are documented in RealNetworks Production Guide (on CD) Not documented in a single reference <smil xmlns="http://www.w3.org/2001/SMIL20/Language" xmlns:rn=“ http://features.real.com/2001/SMIL20/Extensions ” xmlns:cv=“ http:// features.real.com/systemComponent ”> ... </smil>
- 8. 5.7 Metainformation Similar to <meta> element in HTML Used by SMIL clients to display information about presentation RealONE: title, author, copyright QuickTime: author and content SMIL 1 defines a minimum set of attributes SMIL 2 uses <metadata> element to include W3C’s RDF statements No presently supported in SMIL clients RDF metadata can be several times larger than the SMIL Overrides metadata encoded in the media clip Consumed by search engine robots and used in displaying search results <head> <meta name="author" content="John A. Smith" /> <meta name="title" content="South West Coastal Path"/> <meta name="copyright" content="(c) 2000 John A. Smith" /> <meta name="abstract" content="A presentation using images video and audio to illustrate the beauty of the South West Coastal Path" /> </head>
- 9. 5.8 Layout Single <root-layout> for presentation Provide id to allow manipulation and animation Sizes are defined in pixels Defines the size of the client playback window Smallest computer screen is 640x80 (VGA) Others are 800x600, 1024x768 and 1280x1024 Set a background colour: “red”, #FF0000, rgb(255,0,0) SMIL 1 background-color (QuickTime) SMIL 2 backgroundColor Examples Real ONE QuickTime <layout> <root-layout id="main" backgroundColor="# nnnnn " width="640" height="480" /> </layout>
- 10. 5.8.1 Layout (continued) <topLayout> defines secondary top-level windows Sizes are defined in pixels Only implemented in RealONE player No control over window placement on display surface Audio continues to play after window is closed Open second window at start of presentation (default) Use whenActive and whenNotActive attributes Can contain any number of defined regions Examples RealONE default behaviour RealONE whenActive behaviour <layout> <root-layout id="main" backgroundColor="#nnnnn" width="640" height="480" /> <topLayout id=“vidpanel” width=“320” height=“240” backgroundColor=“white”> <region id=“subtitles” … /> </topLayout> … </layout>
- 11. 5.8.2 Switching Layouts <switch> can be used to swap layouts depending on client characteristics Possible uses Language preference settings Adapt presentation to network condition of client Show subtitles to accompany video clip Show text version of audio clip Examples Real ONE switch on systemLanguage attribute value <switch> <!-- Layout for English-UK clients --> <layout systemLanguage =“en”> … </layout> <!-- Layout for French-France clients --> <layout systemLanguage=“fr”> … </layout> </switch>
- 12. 5.9 Regions and Positioning Default backgroundColor is “transparent” backgroundColor=“inherit” uses the <root-layout> colour Position of region defined relative to parent using: top , bottom , left and right attributes Can be pixel or % (percentage) values Volume of an audio region can be set 0% is silent, 100% is full volume and 200% is twice full volume Audio level is relative to volume setting of the playback device <layout> <root-layout id="main" backgroundColor="#FF0000" width="640" height="480" /> <region id="video" width="320" height="240" top="120" left="50" /> <region id="title" width="150" height="40" top="300“ left="50“backgroundColor="teal" /> <region id="audio" soundLevel="50%" /> </layout>
- 13. 5.9.1 Registration Points Purpose is to support precise positioning of content Can be use in two ways: Define regPoint in the clip source tag Define regPoint as part of the layout and assign to the clip (Recommended) regPoint defines a precise location within a region Set of typical values: topLeft, topMid, topRight, midLeft, center, midRight, bottomLeft, bottomMid and bottomRight regpoint values can also be given as x,y coordinates from top-left corner regAlign positions the content in relation to the regPoint Uses same values as regPoint Interaction of regPoint , regAlign and fit attributes is complex See W3C standard for explanation Use RealNetworks examples <layout> <!-- Define registration points --> <regPoint id="centre" left="50%" top="50%" regAlign="center" /> </layout> … <textstream id="intro1" systemLanguage="en" src="text/intro.rt" region="screen" regPoint="center" regAlign=“center” begin="panel4.begin+3s" />
- 14. 5.10 Layering and Fitting Exactly the same as the z-index in the CSS2 specification Root window has a default value of “0” (zero) z-index attribute defines the layering of overlapping regions Values can be positive or negative numbers z-index=“5” or z-index=“-4” Use contiguous values e.g. 10, 20, 30, 40 etc. Higher values display over lower values fit attributes defines how visual media is “fitted” into a region Possible values are: fill hidden meet scroll slice <layout> <root-layout id="main" backgroundColor="#nnnnn" width="640" height="480" /> <region id="video" width="320" height="240" top="120" left="50" z-index="1“ fit=""/> <region id="title" width="150" height="40" top="300" left="50“ backgroundColor="teal" z-index="2"/> <region id="audio" soundLevel="50%" /> </layout>
- 15. 5.11 z-index and regions Defines root region Image region with z-index of “0” (zero) Video region with z-index of “1” Image region acts as a backdrop Video is layered over the backdrop Example <layout> <root-layout width="280" height="220"/> <region id="image" top="10" left="10" width="260" height="200" z-index="0"/> <region id="video" top="20" left="20" width="240" height="180" z-index="1"/> </layout>
- 16. 5.12 fit attribute values fill Scale the object's height and width independently so that the content just touches all edges of the box. hidden If the intrinsic height (width) of the media object element is smaller than the height (width) defined in the region element, render the object starting from the top (left) edge and fill up the remaining height (width) with the background color. If the intrinsic height (width) of the media object element is greater than the height (width) defined in the region element, render the object starting from the top (left) edge until the height (width) defined in the region element is reached, and clip the parts of the object below (right of) the height (width). meet Scale the visual media object while preserving its aspect ratio until its height or width is equal to the value specified by the height or width attributes, while none of the content is clipped. The object's left top corner is positioned at the top-left coordinates of the box, and empty space at the right or bottom is filled up with the background color. slice Scale the visual media object while preserving its aspect ratio so that its height or width are equal to the value specified by the height and width attributes while some of the content may get clipped. Depending on the exact situation, either a horizontal or a vertical slice of the visual media object is displayed. Overflow width is clipped from the right of the media object. Overflow height is clipped from the bottom of the media object. scroll A scrolling mechanism should be invoked when the element's rendered contents exceed its bounds. Example
- 17. 5.13 Embedded SMIL: Structure XHTML+TIME brings SMIL2 behaviours to HTML in IE5.5 and IE6 Declares the XML Namespace “t” (for time) URN provides a unique and persistent identifier for it Declare a CSS attribute for HTML elements to use “time2” behaviour Import the time2 behaviours into the namespace Recipe to include in the HEAD of the HTML document Could be included dynamically using SSI, PHP, ASP etc. Keep a local HTML+TIME template handy <html xmlns:t ="urn:schemas-microsoft-com:time“ > <head> <style> .time {behavior: url(#default#time2);} </style> <?import namespace=t urn="urn:schemas-microsoft-com:time“ implementation="#default#time2" /> </head> <body> <!--Content goes here --> </body> </html>
- 18. 5.14 Metainformation Use HTML <meta> tags as in any other web pages Check the organisation’s metadata standards Greater range of metadata supported than in dedicated SMIL aware media players Consumed by search engine robots and used in the display of search results Include automatically as part of a dynamically generated web page <head> <meta name="author" content="John Smith"> <meta name="description" content="A SMIL presentation of the SWCP"> <meta name="keywords" content="SMIL, smil, walking, coastal, path"> </head>
- 19. 5.15 Layout and Positioning Layout is controlled using Cascading Style Sheets (CSS2) CSS cannot define the size of a browser window Call a javascript function for window.open <div> is used to declare discreet division in the HTML page class attribute is used call time behaviours Use the style attribute to define position position:absolute position:relative Use top and left for most positioning right, bottom, width and height can be used Position with pixel values for consistency Other values can be used – em pt in mm Provide an id to permit reference to the div Example <body> . . . <div class="time" id="intro" style="position:absolute; left:50px; top:50px"> <p>South West Coastal Path: Summer 2000</p> </div> . . . </body>
- 20. 5.15.1 Using Cascading Style Sheet Example .txtPanel /* Define style for text panel */ { /* This can be called from class attribute */ position:absolute; top:90px; /* Use pixel values */ left:420px; width:200px; height:260px; background-color:#silver; /* Background is white */ z-index:2 /* Set z-index for this style */ } #rootContainer /* Define style for root window */ { /* Applied to element with corresponding id attribute value */ position:absolute; top:0px; left:0px; width:640px; height:480px; background-color:#99ccff; z-index:0 /* Set z-index for this style */ }
- 21. 5.16 Layering and Fitting z-index value defines the layering of overlapping <div> elements Value is a point on a z-axis extending towards and away from the viewer Higher values are displayed over lower values Values can be positive or negative numbers: “5” or “-4” Progression using sequential ordering 1,2,3 or 10, 20, 30 etc. is suggested Exactly the same as the z-index in the CSS2 specification fit attribute is not available Use CSS2 elements and attributes supported in IEv6 overflow overflowx and overflowy Values are: visible scroll hidden auto See MSDN Library for further details Examples <body> <t:img class="time" id="swcpimg1" begin="2" dur="7" z-index="2" src="images/img2045.jpeg“ style="position:absolute; top:120px; left:140px"/> </body>