Defining Structure Metadata and Layout

5 Defining Structure, Metadata and Layout Building the Outline

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

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!

5.3 SMIL Authoring Rules & Guidelines

Comment and indent to aid readability

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.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

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

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

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

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

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

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

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

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

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

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

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

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>  </body> </html>

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

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>

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 */ }

5.16 Layering and Fitting