The XHTML+SMIL profile integrates a subset of the SMIL 2.0 specification with XHTML. It includes SMIL 2.0 modules providing support for animation, content control, media objects, timing and synchronization, and transition effects. The SMIL 2.0 features are integrated directly with XHTML and CSS, and can be used to manipulate XHTML and CSS features. The profile is designed for Web clients that support XHTML+SMIL markup.
The document type definition (DTD) and XML Schema [XSCHEMA] are implemented using SMIL modules as defined in "Modularization of SMIL" [SMIL-MOD-NOTE], and "The SMIL 20 Modules" [SMIL20-MOD].
This section describes the status of this document at the time of its publication. Other documents may supersede this document. The latest status of this document series is maintained at the W3C.
This document is a Working Draft of the World Wide Web Consortium. Review comments on this specification should be sent to firstname.lastname@example.org. The archive of public comments is available at http://lists.w3.org/Archives/Public/www-smil/.
The XHTML+SMIL Profile specification has been produced as part of the W3C Synchronized Multimedia Activity. The document has been written by the SYMM Working Group (members only). The goals of the SYMM group are discussed in the SYMM Working Group charter (members only).
This specification is a revision of the Working Draft XHTML+SMIL Profile available in the early phase of SMIL2.0 specification (named SMIL Boston).
It is inappropriate to use W3C Working Drafts as reference material or to
cite them as other than "work in progress". This is work in progress and
does not imply endorsement by, or the consensus of W3C.
A list of current W3C Recommendations and other technical documents can be found at http://www.w3.org/TR.
This section is informative.
This profile describes the SMIL modules that are added to XHTML, and details the integration issues, including the application of integrated SMIL modules to CSS styles [CSS20]. The language integration supports all of the modules defined in XHTML Modularization [XMOD], adding timing, animation and multimedia functionality to XHTML elements. This is a modularization of XHTML 1.0 [XHTML10], the reformulation of HTML 4 as an application of XML. The semantics of the XHTML elements and their attributes are defined in the W3C Recommendation for HTML 4 [HTML4].
The document type defined by the XHTML+SMIL profile is XHTML Host language document type conformant.
Using the SMIL timing extensions, any XHTML element on which timing functionality is supported can be set to appear at a given time, to last for a specified duration, and to repeat (i.e. loop). Basic timing and synchronization and functionality is supported with a simple syntax, and more complex timing constructs can be described. Interactive timing is also supported.
The Animation and Transition modules provide additional support for authors to define presentation content that includes motion, style animation, transition effects and other features commonly found in presentation/multimedia authoring tools and runtimes.
In order to easily integrate time-based media (e.g. video and audio), the SMIL media elements are included. SMIL Content control provides elements and attributes to control alternative (including accessible and internationalized) content.
This section explains why certain modules of SMIL 2.0 [SMIL20] are not included. The general philosophy is to use XHTML modules where appropriate, and to include the SMIL modules when they provide essential enhancements.
Layout Module: The SMIL 2.0 layout module is not included. The XHTML/CSS layout model provides layout functionality.
Linking Module: The SMIL 2.0 linking module is not included, as XHTML provides linking functionality.
Structure Module: The SMIL 2.0 structure module is not included, as the XHTML document is defined to be the host language, and so provides the equivalent elements and semantics.
Metainformation Module: The SMIL 2.0 Metainformation module is not included, as XHTML provides its metada functionality.
This section is normative.
A conforming XHTML+SMIL document is a document that requires only the facilities described as mandatory in this specification. Such a document must meet all of the following criteria:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+SMIL //EN" "http://www.w3.org/2001/SMIL20/WD/xhtmlplussmil.dtd">
The user agent must conform to the "User Agent Conformance" section of the XHTML specification ([XHTML10], section 3.2) and the conformance requirements detailed in the SMIL modules ([SMIL20]) supported by the integration profile.
The user agent must conform to the following additional user agent rule:
In an XHTML document incorporating the SMIL functionality defined by the XHTML+SMIL profile, the document's default XML namespace is still XHTML. SMIL elements are included through an additional SMIL namespace declaration:
The name of the unique identifier for the namespace within the document (in this example, 'smil') is left to the discretion of the document author.
The XHTML functionality in the XHTML+SMIL document type is based upon the XHTML modules defined in XHTML Modularization [XMOD], and the Ruby Annotation module as defined in [RUBY]. In addition, the XHTML+SMIL document type supports the timeline-centric multimedia features defined by SMIL 2.0. The formal definition of the modules is not repeated here, but only the extensions introduced with timing. The notation, terms and document conventions used here are borrowed from [XMOD].
The profile includes the XHTML modules defined in [XMOD] and the following SMIL 2.0 modules:
In the module descriptions below, reference is made to the "Common" attribute set and content sets defined in XHTML Modularization [XMOD].
The Animation Module provides a framework for incorporating animation onto a timeline (a timing model) and a mechanism for composing the effects of multiple animations (a composition model). The Animation Module defines semantics for the animate, set, animateMotion, and animateColor elements, as well as where these elements may be used:
The syntactic conventions used in this document to describe additions and
modifications to element content sets are borrowed from
[XMOD]. In particular, the ampersand (&) is used
to denote that a module modifies an element or set of elements with the addition
of new attributes or content model arguments. Additionally, the asterisk
(*) is used to denote that new arguments may be used in
an existing element's content model.
|animate||Common, Timing, attributeName, attributeType, additive, accumulate, calcMode, values, keyTimes, keySplines, from, to, by, targetElement||none|
|set||Common, Timing, attributeName, attributeType, to, targetElement||none|
|animateMotion||Common, Timing, additive, accumulate, calcMode, values, keyTimes, keySplines, from, to, by, path, origin, targetElement||none|
|animateColor||Common, Timing, attributeName, attributeType, additive, accumulate, calcMode, values, keyTimes, keySplines, from, to, by, targetElement||none|
|par&, seq&, excl&, Basic Text&, Hypertext&, List&, Presentation&, Tables&, Image&, Object&, Legacy&||animate*, set*, animateMotion*, animateColor*,|
|Applet&, Edit&, Client-side Image Map&, Server-side Image Map&||animate*, set*, animateColor*|
This module defines the following content sets (element groups for the purpose of defining content models):
This profile uses the targetElement attribute to identify the element to be affected by animation elements. As recommended in the BasicAnimation Module when the targetElement attribute is supported, the profile excludes the XLink [XLINK] attributes href, type, actuate, and show from the animate, set, animateMotion, and animateColor elements.
Animation is allowed on all elements defined by XHTML modules unless exempted by this list:
Certain animation elements are restricted to targeting only the following
elements with the
|animate, set||body, noscript, font, s, strike, u, area, map, object, Basic Text, Presentation, Edit, Bi-directional Text, Hypertext, List, Forms, Tables, Image, IFrame|
|animateMotion||address, blockquote, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var, font, s, strike, u, object, form, input, select, textarea, button, fieldset, label, legend, table, Presentation, Hypertext, List, Image, IFrame|
|animateColor||address, blockquote, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var, font, s, strike, u, form, input, select, option, textarea, button, fieldset, label, legend, optgroup, Presentation, Hypertext, List, Tables, IFrame|
The target attributes of the animation are a subset of the attributes of
the allowed target elements. For the elements on which animation is allowed,
the following attributes may be animated:
class, style, title, align, valign, width, height, cellhalign, cellvalign, clear, border, frame, rules, cellspacing, cellpadding, href, size, color, face, bgcolor, dir, value, disabled, value, disabled, checked, rows, cols, disabled, shade, frameborder, marginwidth, marginheight, disabled, label, selected, disabled, label, value, disabled.
The origin attribute of the animateMotion element defines the relative origin of the values specified.
The origin attribute controls the interaction of the animation function values with the layout position of the target element. The CSS attributes position, top, and left determine the layout position of the element. In effect, origin determines whether to add the element position to the result of the animation function to obtain the element position in the container coordinate space.
The following example illustrates element relative motion:
<div style="position:absolute; top:100; left:100" > <animateMotion dur="5" from="50,50" to="150,150" origin="element" /> </div>
The layout position of the target div is (100,100). The effect is to add the layout position of the target element to each value of the animation function. The target moves from position (150, 150) to (250, 250) in the container coordinate space.
The following example illustrates parent relative motion:
<div style="position:absolute; top:100; left:100" > <animateMotion dur="5" from="50,50" to="150,150" origin="parent" /> </div>
The layout position of the target div again is (100,100). The effect is to ignore the layout position when computing the animation function values. The target moves from position (50, 50) to (150, 150) in the container coordinate space.
The BasicAnimation Module expresses the attribute upon which the animation should act using the attributeName attribute. The only valid target attribute names for the animateColor element are the CSS2 color properties.
The SMIL 2.0 Animation module defines clamping values for certain numeric attributes. The calculation of these attributes shall be performed in floating point.
The SMIL2.0 Content Control Module provides a framework for selecting content based on a set of test attributes. The Content Control Module defines semantics for the switch element, adds the switch element to the Flow content set of the XHTML Basic Text module, and adds the Test attributes set to the elements in the Flow content set of the XHTML Basic Text Module.
The Content Control Module defines the Attribute set "Test".
|Collection Name||Attributes in Collection|
|Test||systemBitrate (Number), systemCaptions (on|off), systemLanguage (CDATA), systemRequired (URI), systemScreenDepth (CDATA), systemScreenSize (CDATA), systemAudioDesc (on|off), systemCPU (NMTOKEN), systemComponent (CDATA), systemOperatingSystem (CDATA), systemOverdubOrSubtitle (overdub|subtitle)|
The SMIL2.0 Media Object Module provides a framework for declaring media. The Media Object Module defines semantics for the ref, animation, audio, img, iframe, video, text and textstream elements. XHTML defines an img element, and so the integration of the Media module extends the semantics and content model of this element.
This profile adds the ref, animation, audio, img, iframe, video, text and textstream elements to the content model of the par, seq, and excl elements of the Timing and Synchronization Module. It also adds these elements to the Inline content set of the Basic Text Module.
|ref, animation, audio, img&, iframe&, video, text, textstream||Common, Test, Timing, timeContainer, clipBegin, clipEnd, src, mediaType||AllAnimation, timeContainer, area, param|
|par&, seq&, excl&, Inline&||ref*, animation*, audio*, img*, iframe*, video*, text*, textstream*|
This profile adds media object properties to the XHTML img and iframe elements. While implementation rules for the img element remain unchanged, the following issues must be taken into consideration when supporting a SMIL-enabled iframe:
@@ Should any of the iframe rules also apply to img? Can XHTML img host, for example, animated SVG documents or any other sort of timed/interactive content?
The SMIL2.0 Timing and Synchronization Module provides a framework for describing timing structure, timing control properties, and temporal relationships between elements.
The Timing and Synchronization Module defines the elements par, seq, and excl. It adds the par, seq, and excl elements to the Inline content set of the Basic Text, Hypertext and Tables Modules.
This profile adds the Timing and RuntimeSync attribute sets from the Timing and Synchronization Moduleto the elements in the Media Object Module, and adds the Timing attribute set to the Flow content set of the Basic Text Module In addition, the Timing attribute set is added to the body element in the XHTML Structure module.
|par||Common, Test, Timing, RuntimeSync, timeAction (CDATA)||par, seq, excl, Flow|
|seq||Common, Test, Timing, RuntimeSync, timeAction (CDATA)||par, seq, excl, Flow|
|excl||Common, Test, Timing, RuntimeSync, timeAction (CDATA)||par, seq, excl, Flow|
|Inline&||par*, seq*, excl*|
The Timing and Synchronization Module defines the Attribute sets "Timing" and "RuntimeSync".
|Collection Name||Attributes in Collection|
|Timing||begin (CDATA), dur (CDATA), repeatCount (CDATA), repeatDur (CDATA), end (CDATA), endsync (CDATA), fill (CDATA), restart (always|whenNotActive|never), timeAction (TimeActions), onBegin (Script), onEnd (Script), onRepeat (Script)|
|RuntimeSync||syncBehavior (locked|canSlip|independent), syncTolerance (CDATA), syncMaster (true|false)|
In addition to the data types defined by XHTML Modularization, the XHTML+SMIL profile defines the TimeActions data type and its semantics, described in the following table:
|TimeActions||Authors may use the following recognized time actions, listed here with
As part of the integration of timing and synchronization functionality with XHTML, this profile defines the timeContainer and timeAction attributes. This profile adds the timeContainer and timeAction attributes to the elements of the Flow content set of the Basic Text Module (as modified by all included modules). In addition, the timeContainer and timeAction attributes are added to the body element in the XHTML Structure module. The default value of the timeContainer attribute for body is "par". The timeContainer attribute is not allowed on the time container elements par, seq, and excl.
The timeAction attribute defines the behavior that is controlled by the timing model. The default depends upon the type of element. The default value is "none" when used with the time container elements. The default value of the timeAction attribute for body is "none".
The following table presents the default time actions. Those modules and elements that are not included do not have a defined time behavior, and cannot legally support timing attributes, or participate in the time model.
Certain elements have a notion of intrinsic behavior that can be controlled over time. This is generally some presentation or behavioral effect, such as the font style controls of the b and strong elements, and the click sensitivity of the a and area elements. One way to logically model the control of intrinsic behavior is to replace the element with a span when it is neither active nor frozen, and to use the original element when it is active or frozen.
Many other elements simply contain content and so default to controlling the "visibility" property for the element. In some cases, an element may have a presentational effect (e.g. the Ruby module elements), but be modeled as a content element. The decision is based upon the usefulness in common authoring scenarios of controlling the presentational behavior in isolation.
For those elements that default to controlling "visibility", setting timeAction to any other value overrides this, and will only control the specified timeAction (and not the visibility). For all other elements, the timeAction will control the default (intrinsic) behavior as well as the indicated timeAction behavior.
@@ Add example
In addition, for those elements that default to "visibility", when they are
children of a sequence time container seq or an
element with "
timeContainer=seq", the default
timeAction is "display". This more closely matches the expected behavior
of the SMIL Language profile.
Element default timeActions
|Module||Elements||Default time action|
|Media||(all)||schedule for playback and render|
|Text||em, kbd, strong, var||intrinsic behavior|
|Image Map||area||link sensitivity|
|Iframe||iframe||intrinsic behavior (schedule for display and render)|
|Timing||par, seq, excl||"none"|
All modules not listed in the table, and all Structure module elements except body do not support timing.
The XHTML+SMIL Language profile specifies events that can be used in conjunction with the SMIL elements defined by the profile. Additionally, DOM 2 dynamic events [DOMLevel2Events] can also be used.
|beginEvent||This event is raised when the timeline starts on an element (see the
|endEvent||This event is raised when the timeilne stops on an element. (see the
|mediacomplete||This event is raised when the element's associated media finishes loading. This event may be raised before the media begins playing, when the element is associated with streaming media.|
|mediaerror||This event is raised when any error is caused by the media file. Errors caused by the media file may include an attempt to load a media file with an invalid path, or if problems with the media file (such as file corruption or an invalid media type) prevent it from loading and playing.|
|outofsync||This event is raised when the element loses synchronization with its associated timeline. This includes the interruption of an element's ability to play its associated media, or any other circumstance where synchronization is lost.|
|pause||This event is raised when the timeline on an element is paused. It may be raised in the case that the timeline is paused by a DOM method.|
|repeat||This event is raised when the timeline repeats on an element, beginning
with the second iteration (see the definition of the
|reset||This event is raised when the timeline state is reset to the value of the begin attribute and playback is commenced from the beginning of the timeline. It may be raised in the case that the timeline is reset by a DOM method.|
|resume||This event is raised when an element's timeline resumes from a paused state. It may be raised in the case that timeline playback is resumed by a DOM method.|
|reverse||This event is raised when the timeline on an element begins to play backward. It may be raised both in the course of normal timeline play, as well as in the case that element playback was reversed with a DOM method.|
|seek||This event is raised whenever a seek operation is performed on the element. It may be raised in the case that the seek operation is executed by a DOM method.|
|syncrestored||This event is raised whenever an outofsync event is raised and synchronization is restored. Specifically, the syncrestored event is raised when synchronization is resumed between the element and its associated timeline.|
|timeerror||This event is raised whenever a time-specific error occurs as a result of setting an invalid value for a SMIL attribute. The timeerror event is raised when any attribute defined by the XHTML+SMIL profile is set to an invalid value, either in the course of normal playback or by a DOM method.|
The Timing and Synchronization Module defines the following additional conformance definition requirements for the language integration profile:
The SMIL2.0 Time Manipulations Module provides attributes for the manipulation of SMIL element timelines.
The Time Manipulations Module defines the accelerate, decelerate, autoReverse, and speed attributes. The attributes are added to the SMIL elements supported by the XHTML+SMIL profile, including animate, set, animateMotion, animateColor, ref, animation, audio, video, text, textstream, par, seq, excl, transitionFilter, and the XHTML elements img and iframe.
|animate&, set&, animateMotion&, animateColor&, ref&, animation&, audio&, video&, text&, textstream&, par&, seq&, excl&, transitionFilter&, img&, iframe&||accelerate, decelerate, autoReverse, speed|
The Transition Effects Module defines a taxonomy of transition effects as well as semantics and syntax for integrating these effects into XHTML documents. The XHTML+SMIL profile includes the functionality of the InlineTransitions module.
In an XHTML document, Transition Effects elements have the following attributes and content model:
|transitionFilter||Common, Timing, type, subtype, mode, fadeColor, targetElement, additive, accumulate, calcMode, values, keyTimes, keySplines, from, to, by||param|
A transitionFilter element may contain one or more XHTML param elements describing extended transition functionality.
This section is normative.
In the future, XHTML+SMIL Language may be extended by other W3C recommendations, or by private extensions. For these extensions, the following rules must be obeyed:
Conformant XHTML+SMIL user agents are prepared to handle documents containing extensions that obey these two rules.
This section is normative.
"Cascading Style Sheets, level 2", Bert Bos, Håkon Wium Lie, Chris
Lilley, Ian Jacobs. W3C Recommendation 12 May 1998,
Available at http://www.w3.org/TR/REC-CSS2
"HTML 4.01 Specification" D. Raggett, A. Le Hors, I. Jacobs. W3C Recommendation
24 December 1999,
Available at http://www.w3.org/TR/html401/
"Document Object Model Level 2 Events Specification", Tom Pixley. W3C
Recommendation 13 November, 2000
Available at http://www.w3.org/TR/DOM-Level-2-Events/
"Ruby Annotation". W3C Recommendation 31 May 2001.
Available at http://www.w3.org/TR/2001/REC-ruby-20010531
"Synchronized Multimedia Integration Language (SMIL 2.0) Specification".
W3C Proposed Recommendation 05 June 200,
Available at http://www.w3.org/TR/smil20/
"The SMIL 2.0 Modules", Warner ten Kate, Aaron Cohen , Philipp Hoschka. W3C
Proposed Recommendation 05 June 200,
Available at http://www.w3.org/TR/smil20/smil-modules.html
"Synchronized Multimedia Modules based upon SMIL 1.0", Patrick Schmitz, Ted
Wugofski and Warner ten Kate. W3C Note 23 February 1999,
Available at http://www.w3.org/TR/NOTE-SYMM-modules. Superceded by [SMIL20-MOD].
"The Extensible HyperText Markup Language: A Reformulation of HTML 4.0 in
XML 1.0". W3C Recommendation 26 January 2000,
Available at http://www.w3.org/TR/xhtml1/
"XML Linking Language (XLink)", S. DeRose, E. Maler, D. Orchard and B. Trafford.
W3C Proposed Recommendation 20 December 2000,
Available at http://www.w3.org/TR/xlink
"Modularization of XHTML", Shane McCarron, Murray Altheim, et al. W3C
Recommendation 10 April 2001,
Available at http://www.w3.org/TR/xhtml-modularization
"XML Schema, XML Schema Part 1: Structures". W3C Recommendation 2 May 2001,
Available at http://www.w3.org/TR/xmlschema-1/