XML Media Formats Robin Burke ECT 360. Outline Multiple XML documents SMIL HTML+TIME Break WML XHTML...
-
Upload
eileen-phelps -
Category
Documents
-
view
221 -
download
1
Transcript of XML Media Formats Robin Burke ECT 360. Outline Multiple XML documents SMIL HTML+TIME Break WML XHTML...
Multiple XML documents
ProblemXSLT needs to access multiple XML
documentsOnly has access to node-sets in
document being processed Example
curriculum designscourse information
Solution
document() function Retrieves document from URL
can be used as part of an XPath expression
<xsl:variable name="course-names"
select="document('course-list.xml')/course-list/course/@name" />
SMIL
Synchronized Multimedia Integration Language
Define Common Standards for multimedia documents.
SMIL 1.0 (1998) SMIL 2.0 (2001)
The Idea
General document format integrating different types of independent media objects.
Promote the notion of time and synchronization as a core functionality.
Bring together major industrial players to define a common standard.RealPlayer, Flash support
SMIL document
A Set of “components” accessible via URLs.
Components have different media types: audio, video, text, images and objects.
Intra- and Inter-object synchronization.
User interactions: media controls and hyper-links (random access).
Organization of a SMIL document
Two parts : Head : contains information of document level Body : contains the temporal scenario, animations,
transitions and the media objects
Structure of a document
toto.smi
head body
seq switchparLayout
Region 1
Media
Audio Channel
Media
Transition
Animation
Transition
Document Head
META element: description of the document properties and metadata (RDF)Title, author, expiration date,
keywords, summary, …
Spatial Aspect
Layout elementHierarchical Model with hotspots
(regPoints)Layers instead of text flow (text flow
for text !)Simple Positioning close to the CSS
Model (x, y, z-index, fit)
Spatial Aspect
Region 1 Region 2
Region 3
b
c
a
Time flow
Regions and sub-regions for the spatial placement of media objects
Document Body: Synchronization
Contains the temporal scenario of the document
A scenario is defined recursively : Schedule elements
Schedule = Parallel | Seq | Switch
Basic Media Objects
Media Objects marked-up with:Audio, Video, Text, Img, Textstream,
Animation, Ref, Param, et … Prefetch
Attributes : Src : identifies the basic media object file (URL)
rtsp://rtsp.example.org/video.mpg
Type : mime type (eg. video/mpeg) Region : identifies the drawing surface Dur : duration of the media object
Synchronization Attributes
The Dur (duration) attribute: “intrinsic”: the duration corresponds to the duration of the
external file. “explicit”: the duration is specified in the document
(dur= “15 s”)
The repeat attribute:RepeatCount=“3” repeats the simple duration of the media.
RepeatDur=“12 s” :
Synchronization Attributes
The begin, end attributes: Value (begin= “13 s”) : offset relative to the parent element. Reference to another clock : (begin= “e2.end + 5 s ”) Reference to the absolute time reference:
(begin= “wallclock(2001-01-01Z)” Reference to an asynchronous event (interactivity):
(begin= “button.click”)
Media Clipping
Spatial Clipping using regions and sub-regions Temporal Clipping using clip-begin et clip-end
attributes (media objects are external files)
<video id="a" src=“video.mpg" clip-begin=“smpte=00:01:45" clip-end=“smpte=00:01:55" …/>
Media Slice
Semantics : play in sequence a set of media objects
Attributes Fill : used to make the object « persist » on the screen
• Remove : removes the object at end time• Freeze : keeps the last frame at end time
The sequential element
<seq> <image id="a" regionName=“x” src="wait.gif“ fill=“freeze”/> <video id="b" regionName=“x” src="video.au dur="20 s" /></seq>
The parallel element
Semantics : Play in parallel a set of media objectsEnd time : maximum duration of child
objects
Synchronization Arcs and Events
a
cb
d
...<par> <audio id="a" src="audio.au" begin="id(b)" /> <video id="b" src="video.au end="id(c)" /> <text id="c" src="text" begin="id(d)"
end=id(a)(end) /> <image id="d" src="image.gif" begin="id(b)(end)/></par> ...
Triggering of objects on events :
...<par> <img id="a" src=“image" /> <video id="b" src="video.mpg” begin=“a.activateEvent" end=“a.activateEvent /> <text id=“c" src=“text” end=“b.focusInEvent" /></par> ...
a
cb
Switch element An element to choose from a set of content
equivalent objects Choice is based on attribute values
language, screen size, depth, bitrate, systemRequired
…and user preferences
...<par> <text .../> <switch> <par bitrate="40000"> ... </par> <par bitrate="24000"> ... </par> ........ </switch> </par> ...
Animations
Definition : A set of attributes are target of the animation A function (calc mode) makes these attributes evolve A control on the instants where the changes are applied
Syntax animateMotion : graphical movements of
elements animate : generic animation applied to element
attributes from/to/by/calcMode set : discrete change of an attribute value at a
given instant animateColor : animation in the color space
Animations<img top="3" ...> <animate begin= "5s" dur="10s" attributeName="top"
by="100" repeatCount="2.5" fill="freeze" calcMode="linear"/> </img>
Calc Mode : discrete, list of values with linear, log interpolation
TransitionsElement : transition
Type and Subtype (transition repository + variant) transIn and transOut attributes
... <transition id="wipe1" type=“zigZagWipWipe" subtype="leftToRight" dur="1s"/><transition id="wipe2" type=“veeWipe" subtype="leftToRight" dur="1s"/> ... <seq> <img src="butterfly.jpg" dur="5s"... /> <img src="eagle.jpg" dur="5s" fill="transition" transIn="wipe1" ... /> <img src="wolf.jpg" dur="5s" fill="transition" transIn="wipe2" transOut=“wipe1” ... /> </seq>
Transition Transition Transition
Hypermedia time-based links Compatible with (Xlink/Xpointer) Extension to the semantics of URLs
http://foo.com/path.smil#ancre(begin(id(anchor))
Two types (a: whole object, area: part of it) Jump over time and space !!
Attribute show Replace (default value) New (fork) Pause (procedure call)
Links with spatial and temporal anchors
Anchor on a sub-surface of an object
Anchor on a sub-duration of an object
<video src=“rtsp://www.w3.org/video.mpg”> <area href=“http://www.w3.org/AudioVideo” coords=“0%, 0%, 50%, 50%”/> <area href=“http://www.w3.org/Style” coords=“50%, 50%, 100 %, 100%”/></video>
<video src=“rtsp://www.w3.org/video.mpg”> <a href=“http://www.w3.org/AudioVideo” begin=“0 s” end=“5 s” /> <a href=“http://www.w3.org/AudioVideo” begin=“10 s” end=“15 s”/></video>
time
HTML+TIME
A set of extensions to HTMLfor building in animation
Will eventually be replaced byXHTML + SMIL
Usable now
Wireless Web Content
WAP Wireless Application Protocol defines interaction style, not content
WML older standard based on "card" metaphor supported by most phones
XHTML MP MP = "mobile profile" regular HTML with restricted element set
cHTML "compact" HTML used for iMode (Japan) migrating to XHTML MP
WML
Wireless Markup Languagecontent for cell phone display“microbrowser”
Special characteristicssmall sizemultiple “pages” per download
• cards
WML Elements
card a chunk of screen content
• title, id multiple cards in one WML document
• "deck" do
link to built-in "options" and "accept" softkeys p
text content a
links wtai protocols for phone functions
• dial number, save in phone book img
only wbmp supported
Differences
Multi-page vs deck can use multi-part message
Some functionality gone variables softkeys
Browser / device-dependence more important image formats table support CSS support
Handling device differences
Basic problem want the best display for each device device capabilities vary widely CSS not widely implemented
• CSS not enough
Solution dynamic server-side page generation
• based on device profiles
can be done with XSLT
Device-specific information
WURFLWireless Universal Resource FileXML application
Webserver
Web requestw/ device type
XSLTstylesheet
Device typeparameter
XHTML MPpage
XHTML MPpage
WURFL
Page data
WURFL example
<device user_agent="SonyEricssonP800" fall_back="ericsson_generic" id="sonyericsson_p800_ver1">
<group id="product_info"> <capability name="brand_name" value="SonyEricsson"/> <capability name="model_name" value="P800"/></group><group id="markup"> <capability name="wml_13" value="true"/> <capability name="html32" value="true"/></group><group id="display"> <capability name="resolution_width" value="208"/> <capability name="resolution_height" value="144"/></group><group id="image_format"> <capability name="jpg" value="true"/> <capability name="gif" value="true"/> <capability name="bmp" value="true"/> <capability name="png" value="true"/> <capability name="colors" value="4096"/></group>...</device>