School of Computer Science & Information Technology

School of Computer Science & Information Technology

G6DPMM - Lecture 18G6DPMM - Lecture 18

Synchronized Multimedia Synchronized Multimedia Integration LanguageIntegration Language

(SMIL)(SMIL)

SMILSMIL Synchronized Multimedia Integration LanguageSynchronized Multimedia Integration Language XML application for multimediaXML application for multimedia

Hence all the advantages of XML - interoperability, Hence all the advantages of XML - interoperability, internationalization, transformable, XML tools, etc.internationalization, transformable, XML tools, etc.

W3C recommendation W3C recommendation SMIL 1.0 - 1998SMIL 1.0 - 1998 SMIL 2.0 - 2001SMIL 2.0 - 2001

Allows the description of temporal and spatial coordination Allows the description of temporal and spatial coordination of one or more media objects.of one or more media objects.

May be delivered locally or streamed over the Internet.May be delivered locally or streamed over the Internet. SMIL 2.0 is SMIL 2.0 is much much more sophisticated than SMIL 1.0more sophisticated than SMIL 1.0

SMIL 1.0 spec is c. 30 pagesSMIL 1.0 spec is c. 30 pages SMIL 2.0 spec is c. 540 pagesSMIL 2.0 spec is c. 540 pages

SMIL 1.0SMIL 1.0 Deliberately simple language to:Deliberately simple language to:

describe the temporal behavior of a presentationdescribe the temporal behavior of a presentation

describe the layout of the presentation on a screendescribe the layout of the presentation on a screen

associate hyperlinks with media objects associate hyperlinks with media objects

SMIL does not contain media content, it describes SMIL does not contain media content, it describes relations between media objectsrelations between media objects

Clean separation between content and structureClean separation between content and structure All the advantages of an XML applicationAll the advantages of an XML application

SMIL 2.0SMIL 2.0

Extends the capability of SMIL 1.0Extends the capability of SMIL 1.0 Sophisticated animationSophisticated animation DOM complianceDOM compliance Incorporation of SMIL into other XML Incorporation of SMIL into other XML

applications (eg XHTML+SIML)applications (eg XHTML+SIML) Incorporation of SVGIncorporation of SVG Advanced streaming capability (eg preload, Advanced streaming capability (eg preload,

download etc)download etc) The SMIL 2.0 language is modularThe SMIL 2.0 language is modular

SMIL 2.0 ModulesSMIL 2.0 Modules Modules are parts of the language dealing with specific areas of functionality. Modules are parts of the language dealing with specific areas of functionality.

Implementations do not need to deal with all modules.Implementations do not need to deal with all modules. Much easier to create specialist implementationsMuch easier to create specialist implementations ModulesModules

Timing & Synchronisation (19 modules)Timing & Synchronisation (19 modules) Time manipulation (1 module - speed of media)Time manipulation (1 module - speed of media) Animation (2 modules - basic & spline)Animation (2 modules - basic & spline) Content control (4 modules for content selection and optimized delivery)Content control (4 modules for content selection and optimized delivery) Layout (4 modules)Layout (4 modules) Linking (3 modules)Linking (3 modules) Media objects (7 modules)Media objects (7 modules) Metainformation (1 module)Metainformation (1 module) Structure (1 module)Structure (1 module) Transition effects (3 modules - fades, wipes etc)Transition effects (3 modules - fades, wipes etc)

SMIL 2.0 ProfilesSMIL 2.0 Profiles Profiles are languages for a specific purpose that conform Profiles are languages for a specific purpose that conform

to the SMIL 2.0 specification. SMIL software implements to the SMIL 2.0 specification. SMIL software implements specific profiles.specific profiles.

Profiles consist of a selection of SMIL 2.0 modules, and Profiles consist of a selection of SMIL 2.0 modules, and may incorporate other XML applications.may incorporate other XML applications. SMIL 2.0 Language ProfileSMIL 2.0 Language Profile

Usually called SMIL, contains most of the features of the full SMIL Usually called SMIL, contains most of the features of the full SMIL 2.0 specification.2.0 specification.

SMIL 2.0 Basic Language Profile SMIL 2.0 Basic Language Profile Intended for mobile devices - PDA/Phone etcIntended for mobile devices - PDA/Phone etc

XHTML+SMILXHTML+SMIL Not a part of the SMIL 2.0 specification (it is a separate W3C project) Not a part of the SMIL 2.0 specification (it is a separate W3C project)

- this adds timing features to XHTML.- this adds timing features to XHTML. SMIL 1.0 - for backwards compatibilitySMIL 1.0 - for backwards compatibility

SMIL ImplementationsSMIL Implementations Real NetworksReal Networks

G2 Player implemented SMIL 1.0G2 Player implemented SMIL 1.0 RealOne Player implements (most of) SMIL 2.0 language profileRealOne Player implements (most of) SMIL 2.0 language profile Proprietary extensions - RealPix and RealTextProprietary extensions - RealPix and RealText

MicrosoftMicrosoft IE 6 implements XHTML+SMILIE 6 implements XHTML+SMIL

AppleApple Quicktime 4.1+ supports SMIL 1.0Quicktime 4.1+ supports SMIL 1.0

SOJASOJA SMIL 1.0 implementation as a Java AppletSMIL 1.0 implementation as a Java Applet

Oratrix productsOratrix products GRiNS Pro (full SMIL 2.0 language profile) authoring systemGRiNS Pro (full SMIL 2.0 language profile) authoring system GRiNS Editor for RealOneGRiNS Editor for RealOne GRiNS Player (full SMIL 2.0 language profile)GRiNS Player (full SMIL 2.0 language profile) GRiNS Mobile Player (SMIL Basic language profile)GRiNS Mobile Player (SMIL Basic language profile)

Specifications for a SMIL presentationSpecifications for a SMIL presentation Content Content

whole or partial media objectswhole or partial media objects

Spatial layoutSpatial layout where do media items appear on screen?where do media items appear on screen?

Temporal layoutTemporal layout when do they appear?when do they appear?

Alternative contentAlternative content eg for different bandwidth, different purposes or different userseg for different bandwidth, different purposes or different users

Links Links uses Xlink and Xpointer to provide sophisticated linkinguses Xlink and Xpointer to provide sophisticated linking

MetadataMetadata semantic informationsemantic information

Structure of a SMIL documentStructure of a SMIL document

<head> element<head> element Contains metadata and layout informationContains metadata and layout information

<body> element<body> element Contains media objects and linksContains media objects and links

<smil><smil> <head><head> <meta><meta> ... metadata... metadata </meta></meta> <layout><layout> ... layout information... layout information </layout></layout> </head></head>

<body><body> ... media objects, timing & links... media objects, timing & links </body></body> </smil></smil>

SMIL Media ObjectsSMIL Media Objects

Media object elementsMedia object elements<text><text> <textstream><textstream><img><img> <audio><audio><video><video> <animation><animation><ref> (generic)<ref> (generic)

AttributesAttributes src - the URI of the objectsrc - the URI of the object type - MIME typetype - MIME type name - for human readabilityname - for human readability

Media type determined by file extension or type attributeMedia type determined by file extension or type attribute ExamplesExamples

<img src="mypic.jpg" /> <img src="mypic.jpg" /> <audio src="http://www.cs.nott.ac.uk/~tjb/ding.mp3"<audio src="http://www.cs.nott.ac.uk/~tjb/ding.mp3"

name="Ding!" name="Ding!" type="x-audio/mpeg" /> type="x-audio/mpeg" />

Also brush elementsAlso brush elements paints directly onto screenpaints directly onto screen

Temporal / Spatial ExistenceTemporal / Spatial Existence

Text Text SpaceSpace Time - has a duration, but does not change (ie is discrete)Time - has a duration, but does not change (ie is discrete)

ImageImage SpaceSpace Time - has a duration, but is discrete (usually)Time - has a duration, but is discrete (usually)

Video & AnimationVideo & Animation SpaceSpace Time - has a duration and changes throughout that (ie continuous)Time - has a duration and changes throughout that (ie continuous)

AudioAudio Does not exist in spaceDoes not exist in space Time - has a duration and changes throughout that (ie continuous)Time - has a duration and changes throughout that (ie continuous)

RegionsRegions

Used to define spatial existenceUsed to define spatial existence

<img src="mypic.jpg" region="top_box" /><img src="mypic.jpg" region="top_box" />

Regions are defined by X & Y coordinates (pixels or percentage of the Regions are defined by X & Y coordinates (pixels or percentage of the window) and Z coordinate (stacking order - highest integer on top)window) and Z coordinate (stacking order - highest integer on top)

Regions all have a unique ID, and may overlap.Regions all have a unique ID, and may overlap.

<region id="top_box" top="20" left="20"<region id="top_box" top="20" left="20"

height="50" width="200" z-index="2"/> height="50" width="200" z-index="2"/> Regions are contained in the layout element, along with the root-layout Regions are contained in the layout element, along with the root-layout

which defines the window.which defines the window.

<layout><layout>

<root-layout ... /><root-layout ... />

<region ... /><region ... />

</layout></layout>

Positioning of media in regionsPositioning of media in regions

Regions may overlap or be nested (there is a hierarchy of Regions may overlap or be nested (there is a hierarchy of regions - allowing media objects to be anchored together)regions - allowing media objects to be anchored together)

Media objects are placed in regions and positioned relative to Media objects are placed in regions and positioned relative to them (top, bottom, left, right, height and width).them (top, bottom, left, right, height and width).

Clipping media objectsClipping media objects May or may not fill their regionMay or may not fill their region If they are re-sized the aspect ratio may or may not be preservedIf they are re-sized the aspect ratio may or may not be preserved Slicing may or may not occurSlicing may or may not occur Scrolling may or may not occurScrolling may or may not occur

Layout is adaptableLayout is adaptable It can change to suite different devices or purposesIt can change to suite different devices or purposes ExamplesExamples

Computer vs handheldComputer vs handheld Movies with subtitlesMovies with subtitles

Types of TimeTypes of Time

Media timeMedia time Time determined by media (eg frame rate of movie, or Time determined by media (eg frame rate of movie, or

sampling rate of sound).sampling rate of sound).

Document timeDocument time An object is displayed at a specified time after the An object is displayed at a specified time after the

document is loaded, for a specied duration.document is loaded, for a specied duration.

Run-timeRun-time The timing is dependent upon data transfer over a The timing is dependent upon data transfer over a

networknetwork

Duration of Media ObjectsDuration of Media Objects

Intrinsic durationIntrinsic duration derived from media (eg the length of a video)derived from media (eg the length of a video) discrete media has an intrinsic duration of zerodiscrete media has an intrinsic duration of zero

Explicit durationExplicit duration real time - dur attribute is specified in seconds or minutesreal time - dur attribute is specified in seconds or minutes Examples:Examples:

<video src="myVid.mpeg" region="box" dur="30s" /><video src="myVid.mpeg" region="box" dur="30s" /> <image src="myPic.jpg" region="box" dur="5s" /> <image src="myPic.jpg" region="box" dur="5s" />

The repeat attribute may be set to an integer, or set as "indefinite"The repeat attribute may be set to an integer, or set as "indefinite" Paralell vs sequential playingParalell vs sequential playing

<par> elements are played in paralell<par> elements are played in paralell <seq> elements are played sequentially<seq> elements are played sequentially <par> and <seq> elements may be nested<par> and <seq> elements may be nested

Start and end times can be absolute or relative to other elementsStart and end times can be absolute or relative to other elements

Interaction in SMILInteraction in SMIL

SMIL 2.0 responds to DOM events SMIL 2.0 responds to DOM events (eg onClick, onMouseOver etc)(eg onClick, onMouseOver etc)

Any timing construct can be set to trigger by any eventAny timing construct can be set to trigger by any event Other timing constructs include:Other timing constructs include:

Animation (region placement changes over time)Animation (region placement changes over time) Transitions (standard library of transitions is accessed, and their Transitions (standard library of transitions is accessed, and their

speeds set)speeds set) Manipulations (mostly media playback speed)Manipulations (mostly media playback speed)

Test Attributes - Can deliver alternative contentTest Attributes - Can deliver alternative content LanguageLanguage Data transfer rateData transfer rate Screen sizeScreen size User preferences (eg text/image, closed captions on/off)User preferences (eg text/image, closed captions on/off)

Linking in SMILLinking in SMIL Linking can be to other SMIL, or any other web contentLinking can be to other SMIL, or any other web content <a> element similar to that of HTML<a> element similar to that of HTML

<a href="mypage.html" external="true"><a href="mypage.html" external="true"><img src="mypic.jpg" region="box” dur="5"/><img src="mypic.jpg" region="box” dur="5"/>

</a> </a>

<area> element allows much more sophisticated linking from <area> element allows much more sophisticated linking from any spatial or temporal part of a document.any spatial or temporal part of a document.

SMIL & SVGSMIL & SVG

SMIL & SVG are complementary technologies.SMIL & SVG are complementary technologies.

There is some element of overlap, but the emphasis is There is some element of overlap, but the emphasis is completely different. completely different.

SVG is incorporated into SMIL 2.0.SVG is incorporated into SMIL 2.0.

DOM provides the key to interactive interoperability.DOM provides the key to interactive interoperability.

Adobe SVG Viewer is implemented as a RealOne plugin - Adobe SVG Viewer is implemented as a RealOne plugin - thus SMIL can render SVG using it.thus SMIL can render SVG using it.