13. SMIL 3.0 External Timing
- Editors for SMIL 3.0:
- Petri Vuorimaa, TKK
- Dick Bulterman, CWI
This section is informative
This module defines an XML timing language that makes SMIL 3.0 element and
attribute timing control available to a wide range of other XML languages.
This language allows SMIL timing to be integrated into a wide variety of
a-temporal languages, even when several such languages are combined in a
compound document. Because of its similarity with external style and
positioning descriptions in the Cascading Style Sheet (CSS) language, this
functionality has been termed SMIL Timesheets.
Timesheets allows the definition of out-of-line timing in conjunction with
non-SMIL languages including compound XML documents. To make authoring
easier, it contains only a limited subset of SMIL functionality. An
alternative to Timesheets is XHTML+SMIL, which gives full SMIL functionality
as in-line in non-SMIL XML documents. Finally, SMIL itself gives full SMIL
functionality as in-line SMIL XML.
SMIL Timesheets can be seen as a temporal counterpart of CSS. Whereas CSS
defines the spatial layout of the document and formatting of the elements,
SMIL Timesheets specify which elements are active at a certain moment and
what their temporal scope is within a document. And as with CSS, SMIL
Timesheets can be reused in multiple documents, which can provide a common
temporal framework for multimedia presentations with different contents but
identical storylines. The document can be shown in a user agent even if SMIL
Timesheets are not supported, since the contents and the layout are still
governed by the document itself. Of course, the temporal aspect of the
document is then lost, since all the elements are active all the time.
The SMIL 3.0 External Timing module is based on the SMIL 3.0 Timing and Synchronization modules with
some restrictions and additional attributes. In addition, it includes the SMIL 3.0
PrefetchControl module. Also, the SMIL 3.0
BasicAnimation module is used for controlling animations. In addition,
SMIL Timesheets uses CSS selectors [CSS2]. Finally, the SMIL 3.0 External
Timing module defines two new elements timesheet and item.
First, an overview of the SMIL Timesheets is given in the Overview section. After that, the new
elements timesheet and
item and use of CSS selectors
are described in the SMIL Timesheet
Specific Elements section. Then, the use of SMIL 3.0 Timing and
Synchronization modules is discussed in the Timing and Synchronization section. After
that, the Prefetch section describes
how the SMIL 3.0 PrefetchControl is used. Next, Animation section covers the use of
SMIL 3.0 BasicAnimation module. Description of the event model and examples
on how events can be used in SMIL Timesheets is given in the Event Model section. Finally, integration
with CSS layout is discussed in the Integration with CSS Layout section.
13.4.1 The timesheet
element
This section is normative.
The timesheet element
is located in the head section of the document. It defines a parent container
for other SMIL Timesheet elements.
The src Attribute
This section is normative.
The src attribute tells the
location of an external timesheet, which will be appended to the end of the
local timesheet. With this attribute a common timesheet can be reused in
multiple documents. The attribute must contain a valid URI.
This section is normative.
The media attribute is
used for selecting the most suitable timesheet for current media device. It
works similarily to the @media rule in the CSS stylesheets [CSS2].
13.4.2 The item element
This section is normative.
The item target element
references elements in the document host language(s). The item element
implements the actual connection between the timesheet and the document. It
can reference a media element or a set of elements by the element's tag, id
or class; the syntax and processing is similar to the CSS selector [CSS2]
syntax.
The CSS selector can match more than one element in the document body, for
example, when CSS class selector is used. In that case, all matching elements
are selected. Thus, one item element can reference multiple body elements at
the same time. In practise, this is the same as referencing the selected body
elements with individual ID selectors element by element.
The select
Attribute
This section is normative.
The select attribute
links the timesheet to the document. The attribute follows the same syntax
and processing as the CSS selectors [CSS2], so that the elements can be
referenced by their name, id or class, or a more complex combination of the
selectors. If the attribute targets multiple elements in the document, item
controls all of them. The attribute value can also specify a comma separated
list of selectors.
This section is normative.
The beginInc attribute
increments the begin time by the defined value when the selector matches more
than one element.
This section is normative.
The indexStart
attribute can be used to change the starting value of the
index() function. The default value of indexStart attribute is 0,
and thus the index() function starts to count the found item
elements from index number 0. IndexStart attribute can be
given positive integer value to change the starting value of the
index() function to the given value. An example of how IndexStart attribute can be
used is given in the Event Model
section, which describes a use case of the index()
function.
This section is normative.
The index() function can be used to automatically generate
index numbers for both internal and external events within begin, dur, or end attributes of the item element. If these attributes
contain the index() function, it must be replaced with the given
parameter and the current index number of the matched item. The index number
starts from 0 and counts upwards. The starting number can be changed to some
other positive integer number with the indexStart attribute. An
example how the index() function can be used is given later in
the Event Model section.
This section is normative.
The item element can
contain time containers seq,
par, and excl, prefetch elements, and other
item elements. However, the
direct child of the item
element must be either the seq, par, and excl time container or none. Other
descendant item elements can
only be included within the child seq, par, and excl time containers. Furthermore,
the parent item element
limits the scope of the CSS selectors of the child item elements to match only
descendant elements of the elements selected by the parent item element.
This section is informative.
The SMIL 3.0 External Timing module uses four SMIL 3.0 Timing and Synchronization modules:
- BasicInlineTiming
- EventTiming
- BasicTimeContainers
- BasicExclTimeContainers
- RepeatTiming
This section gives futher details on the attributes and elements of the
above mentioned modules. The reader is presumed to have read and be familiar
with them.
The timing semantics of the timesheets is based on the semantics of the SMIL 3.0 Timing and Synchronization chapter,
although it has been simplified a bit. This may cause the timing model not to
be as powerful in expressing timing relations as SMIL's, but it should be
more approachable to the authors.
The base time, or the syncbase of a timesheet element is the
moment when the element is activated by its parent. Activating an element
doesn't necessarily make the referenced media element visible. Rather, it
sets the time moment "0s", to which the element's attributes are compared.
The syncbase of the child elements of a time container is dependent on the
type of the container. The children of par and excl elements have the starting
time of their parent as their syncbase. The children of the seq element consider the end time of
preceding child as their syncbase. This time is resolved only at the moment
the preceding child ends.
Figure 1
shows a simple example of the semantics of a timesheet. A parallel time
container has two children, which are item elements referencing two media
elements. When the par is
started, it activates both its children with the current time as their
syncbase. The media elements referenced by the children are not activated
yet. At time moment 1s, the media element item1 is
activated, according to the begin value of the referencing timesheet element.
At 2s, the item2 is activated. At 3s, the duration
of item1 runs out, so it is stopped and the corresponding timesheet
element deactivates itself. At 4s, the parent container stops
according to its duration attribute, stopping all of its active children.
Figure 1: Timeline of
a Timesheets
The duration of an element is primarily defined by the dur attribute. If the element is not
stopped prematurely, due to an event or scheduling of its parent, the dur attribute tells the overall
duration of the element. The element will not stop until this duration has
passed, and will not stay active longer than this duration. The value of the
dur attribute will prevail:
- when the sum of the durations of the children of a time container
extends the value of the attribute;
- when the implicit duration of the media elements, like audio or video
is longer than the specified duration;
- when the repeatCount or repeatDur attributes
extend the duration of a media element to be longer than the specified
duration.
If the duration is not set, the duration of an element depends on the type
of the referenced elements, or the durations of the children. The timesheet
items can reference to discrete and continuous elements in the document.
Discrete elements don't have implicit durations, and the implicit duration of
an item element referencing a
discrete element is "indefinite". Continuous elements have their
own durations, which will be also used as the duration of the timesheet
element. The duration of the timecontainer depends on the durations and
activations of its children. The seq and par elements stay active until all
of their children have stopped. The implicit duration of the excl is always
"indefinite".
The begin Attribute
The dur Attribute
The end Attribute
This section is normative.
The end attribute supports
offset and event values, and "indefinite". All other values are
not supported. The end
attribute is defined in the SMIL 3.0 Timing and
Synchronization module.
The fill Attribute
This section is normative.
The fill attribute allows
an author to specify that an element should be extended beyond the active
duration by freezing the final state of the element. It is defined in the SMIL 3.0 Timing and
Synchronization module. Since SMIL 3.0 External Timing module does not
include transitions, the fill="transition" value of fill attribute is not supported.
Also, since the fillDefault attribute is not included in the
SMIL 3.0 External Timing module, the fill="default" is
interpreted the same as fill="auto".
The first Attribute
This section is normative.
The first attribute sets
the current active child of a time container "inactive". Then, it
selects the first child element and sets it "active".
The prev Attribute
This section is normative.
The prev attribute first
checks, whether the current active child is the first child. If not, it sets
the current active child of a time container "inactive". Then,
it selects the previous child of the time container and sets it
"active".
The next Attribute
This section is normative.
The next attribute first
checks, whether the current active child is the last child. If not, it sets
the current active child of a time container "inactive". Then, it
selects the next child of the time container and sets it
"active".
The last Attribute
This section is normative.
The last attribute sets
the current active child of a time container "inactive". Then, it
selects the last child of the time container and sets it
"active".
The par Element
The seq Element
This section is normative.
The seq element is defined
in the SMIL 3.0 Timing and
Synchronization module.
There are also four additional attributes that are specified for the seq element. They are first, prev, next, and last. These are used to select a
certain child of the seq
element, which facilitates the creation of presentations where the user can
have control of the progression of the timeline, for example, a slide
show.
The excl Element
This section is normative.
The excl element is a
simplified version of the excl element defined in the SMIL 3.0 Timing and
Synchronization module, since the SMIL 3.0 External Timing Module does
not include the BasicPriorityClassContainers module.
There are also four additional attributes that are specified for the excl element. They are first, prev, next, and last. These are used to select a
certain child of the excl
element, which facilitates the creation of presentations where the user can
have control of the progression of the presentation, for example, a picture
show.
This section is normative.
The meadiaSize
attribute defines how much of the resource to fetch as a function of the file
size of the resource. It is defined in the SMIL 3.0
PrefetchControl module.
This section is normative.
The meadiaTime
attribute defines how much of the resource to fetch as a function of the
duration of the resource. It is defined in the SMIL 3.0
PrefetchControl module.
This section is normative.
The bandwidth
attribute defines how much network bandwidth the user agent should use when
doing the prefetch. It is defined in the SMIL 3.0
PrefetchControl module.
This section is normative.
The prefetch element
gives authoring tools or savvy authors the ability to schedule retrieval of
resources when they think that there is available bandwidth or time to do it.
It is defined in the SMIL 3.0
PrefetchControl module. It uses the mediaSize, mediaTime, and bandwidth attributes.
This section is normative.
Timesheets uses the select attribute to specify the
target element. Therefore is does not include the targetElement
and the XLink attributes href, actuate,
show, and type attributes. The target attribute is
specified with the attributeName attribute
and optional attributeType attribute,
which specifies whether the target attribute is CSS property or XML
attribute. Animation is described either as a list of values, or in a simplified form
that describes the from,
to, and by values. The calcMode attribute specifies
the interpolation mode for the animation. The cumulative and additive
behavior of repeating animations is controlled with the accumulate and additive attributes,
respectively. The origin
attribute specifies the origin of motion for the animation. Finally, begin, dur, end, and fill attributes are used to control
the timing of animation, while repeatCount and repeatDur attributes are used
to control the repeat of animation.
The select attribute is
described in the SMIL Timesheet Specific
Elements section, while the begin, dur, end, fill, repeatCount, and repeatDur attributes are
described in the Timing and
Synchronization section. The other animation attributes are described
below.
This section is normative.
The attributeType
attribute specifies the namespace in which the target attribute and its
associated values are defined. It is defined in the SMIL 3.0
BasicAnimation module.
The values
Attribute
This section is normative.
The values attribute
contains a semicolon-separated list of one or more values. It is defined in
the SMIL 3.0
BasicAnimation module.
The from Attribute
This section is normative.
The from attribute
specifies the starting value of the animation. It is defined in the SMIL 3.0 BasicAnimation
module.
The to Attribute
This section is normative.
The to attribute specifies
the ending value of the animation. It is defined in the SMIL 3.0 BasicAnimation
module.
The by Attribute
This section is normative.
The by attribute Specifies a
relative offset value for the animation. It is defined in the SMIL 3.0 BasicAnimation
module.
The origin
Attribute
This section is normative.
The origin attribute
specifies the origin of motion for the animation. It is defined in the SMIL 3.0
BasicAnimation module.
This section is normative.
The animate element
controls the animation of both CSS properties and XML element attributes. It
is defined in the SMIL 3.0
BasicAnimation module. It uses the select, from, to, by, values, calcMode, accumulate, additive, begin, dur, end, fill, repeatCount, and repeatDur attributes.
The set Element
This section is normative.
The animateMotion
element moves an element along a path. It is defined in the SMIL 3.0
BasicAnimation module. It uses the select, from, to, by, values, calcMode, accumulate, additive, origin, begin, dur, end, fill, repeatCount, and repeatDur attributes.
This section is normative.
The animateColor
element specifies an animation of a color attribute. It is defined in the SMIL 3.0
BasicAnimation module. It uses the select, from, to, by, values, calcMode, accumulate, additive, begin, dur, end, fill, repeatCount, and repeatDur attributes.
This section is informative.
The index() function can be used to automatically generate
index numbers for both internal and external events within begin, dur, or end attributes of item element. The
following example gives an example on how index() function can
be used. The example is an image show, which consist of images and
corresponding thumbnail images, which can be used to select an individual
image for viewing. Only one image is shown at a time.
<head>
<!DOCTYPE htmlLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:smil="http://www.w3.org/2007/07/SMIL30/Timesheets">
<head>
<smi:timesheet>
<par>
<excl>
<item select="#Image1" begin="Thumbnail1.DOMActivate" />
<item select="#Image2" begin="Thumbnail2.DOMActivate" />
<item select="#Image3" begin="Thumbnail3.DOMActivate" />
<item select="#Image4" begin="Thumbnail4.DOMActivate" />
<item select="#Image5" begin="Thumbnail5.DOMActivate" />
</excl>
<par>
<item select="#Thumbnail1" />
<item select="#Thumbnail2" />
<item select="#Thumbnail3" />
<item select="#Thumbnail4" />
<item select="#Thumbnail5" />
</par>
</par>
</smil:timesheet>
</head>
<body>
<img src="Image1.jpg" class="Image" id="Image1" />
<img src="Image2.jpg" class="Image" id="Image2" />
<img src="Image3.jpg" class="Image" id="Image3" />
<img src="Image4.jpg" class="Image" id="Image4" />
<img src="Image5.jpg" class="Image" id="Image5" />
<br />
<button class="Thumbnail" id="Thumbnail1">
<img src="Thumbnail1.jpg" />
</button>
<button class="Thumbnail" id="Thumbnail2">
<img src="Thumbnail2.jpg" />
</button>
<button class="Thumbnail" id="Thumbnail3">
<img src="Thumbnail3.jpg" />
</button>
<button class="Thumbnail" id="Thumbnail4">
<img src="Thumbnail4.jpg" />
</button>
<button class="Thumbnail" id="Thumbnail5">
<img src="Thumbnail5.jpg" />
</button>
</body>
</html>
In the above example, the body of the HTML file consists of five pictures
and five buttons, which contain thumbnails of the same images. The idea is to
show one image at a time. The image to be shown is selected by the thumbnail
buttons. Therefore, the timesheets consist of one par time container, which contains
one excl and another par time container. Within the excl time container the item elements select the images,
while the item elements
within the second par time
container select the individual thumbnail buttons. DOMActivate
events cause the excl time
container to change the shown image according to which button was pushed.
The problem with the above example is that each time the position of an
image is changed, deleted, or added to the image show, the Timesheet has to
be updated. Therefore, the Timesheet is not reusable. The main problem lies
in the references to the DOMActive events, because the index
numbers have to be updated. Thus, there is need to automatically generate
index numbers for the DOMActivate event references in the
Timesheets. The index() function can be used exactly for this
purpose. In the Timesheet below, index() function is used within
the begin attribute of item element, which selects the
images within the excl time
container.
<smil:timesheet>
<par>
<excl>
<item select=".Image" begin="index(Thumbnail).DOMActivate" />
</excl>
<par>
<item select=".Thumbnail" />
</par>
</par>
</smil:timesheet>
The index() function adds the index number to the Thumbnail
parameter (e.g., Thumbnail0.DOMActivate,
Thumbnail1.DOMActivate, etc.) in the begin attribute. Therefore, one
".Image" class selector can be used in the select attribute instead of
severall id selectors. The main advantage of this is that changing the order
of images, deleting images, or adding new images does not any longer require
updating the Timesheets. Thus, the Timesheets is now much more reusable.
However, there is one problem in the above example. The index numbering
starts from 0. It should be corrected to start from 1 by using the indexStart attribute as shown
in the example below.
<smil:timesheet>
<par>
<excl>
<item select=".Image" indexStart="1" begin="index(Thumbnail).DOMActivate" />
</excl>
<par>
<item select=".Thumbnail" />
</par>
</par>
</smil:timesheet>
Now, the index numbering starts from 1, and thus the Timesheet functions
properly. However, the Timesheets can be written in even more compact format.
The reason is that all the thumbnail images in buttons are allways shown, and
thus the second par is
actually unnecessary. When it is removed, also the first par time container becomes
unnecessary. Therefore, the most simple Timesheets for this use case is as
follows.
<smil:timesheet>
<excl>
<item select=".Image" indexStart="1" begin="index(Thumbnail).DOMActivate" />
</excl>
</smil:timesheet>