previous   next   contents  

13. The SMIL 3.0 External Timing Module

Editors for SMIL 3.0:
Petri Vuorimaa, HUT
Dick Bulterman, CWI

Table of contents

13.1 Summary of Changes for SMIL 3.0

This section is informative

The facilities proposed in this module represent new functionality for SMIL 3.0.

13.2 Introduction

This section is informative

This moduke 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 in to 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 language CSS, this functionality has been termed SMIL timesheets.

SMIL Timesheets can be seen as a temporal counterpart for 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 the 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.

13.3 The SMIL 3.0 BasicTimesheets Module

This section is normative.

This section defines the elements and attributes that make up the functionality in the SMIL BasicTimesheets module.

13.3.1 Elements and Attributes

The SMIL 3.0 BasicTimesheets module defines two elements that provide basic support for timesheets mark-up for XML presentations.

The elements defined in this module are:

timesheet
par
seq
excl
item

The attributes defined in this module are:

select
prefetch

The timesheet element

The timesheet element defines a parent container for the par, seq, excl, and item SMIL Timesheet elements of the timing language.

Element Attributes

The timesheet element defines the following attributes:

src = CDATA
The value of src 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.
media = CDATA
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].
Element Content

The timesheet element contains one or more par, seq, excl, and item SMIL Timesheet elements of the timing language.

The par element

The par Parallel time container. All the children of the par are activated simultaneously and the duration of the container, if not specified with the dur attribute will be the same as with the child that has the longest duration of all the children of the container. This element is similar to the par element specified in the SMIL 3.0 Timing and Synchronization Module.

Element Attributes

This elements accepts the standard set of SMIL timesheet attributes. Profiles integrating SMIL Timesheets may specifiy other attributes for this element.

Element Content

The par element contains one or more par, seq, excl, and item SMIL Timesheet elements of the timing language.

The seq element

The seq Sequential time container. The children of seq are displayed sequentially so, that next child is activated as soon as the previous child finishes. The first child is activated when the parent container starts. Only one child of seq can be shown simultaneously. Total duration of the seq is either specified by the dur attribute, or if it is omitted, by the sum of durations of all the children of the element. If a child of the container has an indefinite duration, the following children will never be activated and the duration of the container will be indefinite. This element is similar to the seq element specified in the SMIL 3.0 Timing and Synchronization Module.

Element Attributes

This elements accepts the standard set of SMIL timesheet attributes. Profiles integrating SMIL Timesheets may specifiy other attributes for this element.

Element Content

The seq element contains one or more par, seq, excl, and item SMIL Timesheet elements of the timing language.

The excl element

The excl Exclusive time container. The exclusive time container can have only one child active at a certain moment, similarly to the sequential time container. The excl doesn't provide any other synchronization or scheduling to its children, it only assures that no multiple children are active simultaneously. When a child starts according to its begin attribute, the container deactivates any other child that may be active.

Unlike the other time containers, excl has implicitely indefinite duration, since there is no defined situation when the container should end. The par ends when all the children has stopped, and the seq when the last child finishes. Neither approach is applicable to the excl, since the temporal order of the children is unknown.

The excl is a special case of the seq where the container's duration is set to indefinite and all the children have indefinite or interactive begin times. It is also a simplified version of the excl element defined in the SMIL 3.0 Timing and Synchronization Module.

Element Attributes

This elements accepts the standard set of SMIL timesheet attributes. Profiles integrating SMIL Timesheets may specifiy other attributes for this element.

Element Content

The excl element contains one or more par, seq, excl, and item SMIL Timesheet elements of the timing language.

The item element

The item target element reference element. 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 syntax.

Element Attributes

The item element defines the following attributes:

select = CDATA
The select attribute links the timesheet to the document. The attribute follows the same syntax and processing as the CSS selectors, 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.
prefetch = CDATA
The prefetch controls the loading of the resources needed by the elements referenced by the item element. Some resources, like audio, video and big images, can be quite big in size and fetching them on the fly while the timesheet is already running could skew the timing of the whole timesheet. With the prefetch attribute the author can mark certain elements and their resources to be prefetched to the memory before the timesheet is started. This way the resources can be shown precisely at the specified moment of time. If the attribute is omitted or set to false, the resources are loaded just before the item is activated. When the attribute is set to true the resources are loaded into the memory before the timesheet and the timeline is started.
Element Content

This element is empty.

13.3.2 Event Model

The begin and dur attributes can contain references to DOM events [DOM2Events]. DOM events can be triggered by user interaction or by some other event in the document. Events are divided into two distinct groups, internal events and user events.

Internal events

Internal events are dispatched from within the timesheets. They can be used by other elements in the timesheet to create relations between different parts of the timeline. The events specified are begin event, which is dispatched when an element starts and end event, which is dispatched when element stops.

User events

User events are triggered by the actions that user makes. A typical example is that the user clicks on a link in the document, and thus a DOMActivate event is dispatched [DOM2Events].

Event semantics

A timesheet element is set to listen to a certain event by specifying the event's target and type by either begin or dur attribute. When specified by the begin attribute, an inactive or active but not yet started element will be started when it receives the specified event. This may involve the activation and starting of the parent elements as well, which can require some special scheduling to be done on the upper level of the DOM tree. Consider Figure 2 as an example. At a certain time, the item with the id "1" is active. This means that the second child of the seq (i.e., the par element) can't be active. Next, the item number "3" gets an event, which it is set to listen to by the begin attribute. To activate itself, the element must first inform its parent that it is going to start. The parent (i.e., the par element) is also inactive, so it informs its parent of the activation. The parent seq element then stops the excl element and its children to allow the par element to start, and par element then activates its children according to the definition.

Events on a timesheet

Figure 2: the affect of event on a timesheet.

When the element is specified to stop according to an event, it doesn't cause that much processing in the timesheet. The element informs its parent that it has stopped and parent then decides what should happen next. Of course, some other element could be waiting to start according to the end event from the particular element.

Additional events

There are also four additional events that are specified for the seq element. They are select-next, select-prev, select-first and select-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. It should be possible to add later more additional events to any other elements of the timesheet.

13.4 Semantics of the SMIL Timesheets Timing Model

This section is normative.

The timing semantics of the timesheets is based on the semantics of the SMIL timing model [SMIL21-timing], although it has been simplified a bit. This may cause the timing model not to be as powerful in expression of timing relations as the 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 necessary make the referenced media element visible. Rather, it sets the time moment "0s", to which the element's attributes are compared. Thus, it's not possible to specify a negative value to the begin attribute, since it would mean that the element was supposed to start in the past when it was still inactive. The timesheet element can activate itself, according to the events it is set to listen. The self-activation of the element bubbles upwards in the DOM so that the parent elements do the necessary actions to allow the activation of the correct child.

The syncbase of the child elements of a time container is depended 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.

Time semantics

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 that this duration. The value of the dur attribute will prevail.

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 static and dynamic elements in the document. Static elements don't have implicit durations, and the implicit duration of an item element referencing a static element is indefinite. Dynamic 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.

13.5 Annotated Examples

This section is informative.

13.5.1 Simple without events

This example shows a document that could be a single slide in a slide show. A new bullet is shown every two seconds.

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:time="http://www.x-smiles.org/2004/timesheet">

<head>
  <style type="text/css">
  ...
  </style>

  <time:timesheet>
    <time:par>
      <time:item select="#bullet1" begin="2s"/>
      <time:item select="#bullet2" begin="4s"/>
      <time:item select="#bullet3" begin="6s"/>
      <time:item select="#bullet4" begin="8s"/>

    </time:par>
  </time:timesheet>
</head>

<body>
  <div id="content">
    <p id="title">Introduction</p>

    <p id="bullet1">o Some intro to WLAN</p>
    <p id="bullet2">o Some intro to WLAN</p>
    <p id="bullet3">- Subbullet</p>
    <p id="bullet4">- Subbullet</p>

    <p id="pagenum">2</p>
  </div>
</body>
</html>

13.5.2 With internal events

Next example is a picture show with captions for each image shown simultaneously. The new image is shown every five seconds, which dispatches a begin event that is listened by the corresponding item under the exclusive time container. The exclusive time container takes care that there can be only one caption active at a certain time. If the selection of an image is changed later, there is no need to touch the selection of captions.

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:time="http://www.x-smiles.org/2004/timesheet">

<head>
  <style type="text/css">
  ...
  </style>

  <time:timesheet>
    <time:par>

      <time:seq>
        <time:item select="image1" id="img1" dur="5s"/>
        <time:item select="image2" id="img2" dur="5s"/>
        <time:item select="image3" id="img3" dur="5s"/>
...
      </time:seq>
      <time:excl>

        <time:item select="text1" begin="img1.begin"/>
        <time:item select="text2" begin="img2.begin"/>
        <time:item select="text3" begin="img3.begin"/>
...
      </time:excl>
    </time:par>
  </time:timesheet>

</head>

<body>
  <div>
    <img src="image1.jpg" id="image1"/>
    <img src="image2.jpg" id="image2"/>
    <img src="image3.jpg" id="image3"/>

    ...
    <p id="text1">Text 1</p>
    <p id="text2">Text 1</p>
    <p id="text3">Text 1</p>
    ...
  </div>

</body>
</html>

13.5.3 With user events

This is an extended version of the previous example. In this version, the user has full control of progression of the show. When document is loaded, there's a welcome page that suggest the user to click on a link to start the show. Showing the pictures is not done automatically this time, instead the user must click on links "Next" or "Previous" to navigate through the show. At any time, the user can also jump to the beginning or the end of the presentation.

The start and end pages listen to DOMActivate event, which is dispatched when a user clicks a link. The forward/backward navigation can't use the same event, the seq element listens to events select-next and select-prev instead (cf. Section Additional events). In this example, the XForms [XFORMS] is used to dispatch the events.

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:time="http://www.x-smiles.org/2004/timesheet"
      xmlns:ev="http://www.w3.org/2001/xml-events"
      xmlns:xforms="http://www.w3.org/2002/xforms">

<head>
  <style type="text/css">

  ...
  </style>

  <time:timesheet>
    <time:seq>
      <time:item select="#start-div" begin="0s,home.DOMActivate"/>
      <time:par begin="show.DOMActivate">

        <time:seq id="imageshow">
          <time:item select="#image1" id="img1"/>
          <time:item select="#image2" id="img2"/>
          <time:item select="#image3" id="img3"/>
    ...
        </time:seq>
        <time:excl>

          <time:item select="#text1" begin="img1.begin"/>
          <time:item select="#text2" begin="img2.begin"/>
          <time:item select="#text3" begin="img3.begin"/>
  ...
        </time:excl>
<time:item select="#linkdiv"/>
      </time:par>

      <time:item select="#end-div" begin="end.DOMActivate"/>
    </time:seq>
  </time:timesheet>
</head>

<body>
  <div id="start-div">

    <a href="" id="show" ev:event="DOMActivate" 
    ev:defaultAction="cancel">Start show</a>
  </div/>

  <div>
    <img src="image1.jpg" id="image1"/>
    <img src="image2.jpg" id="image2"/>

    <img src="image3.jpg" id="image3"/>
    ...
    <p id="text1">Text 1</p>
    <p id="text2">Text 1</p>
    <p id="text3">Text 1</p>

    ...
    <div id="linkdiv">
      <a href="">
        Previous
        <xforms:dispatch name="select-prev" target="imageshow" 
        ev:event="DOMActivate" ev:defaultAction="cancel"/>
      </a>
      <a href="">

        Next
        <xforms:dispatch name="select-next" target="imageshow" 
        ev:event="DOMActivate" ev:defaultAction="cancel"/>
      </a>
      <a href="" id="home" ev:event="DOMActivate" 
      ev:defaultAction="cancel">Home</a>
      <a href="" id="end" ev:event="DOMActivate" 
      ev:defaultAction="cancel">End show</a>

    </div>
  </div>

  <div id="end-div">
    <h1>Thanks for watching</h1>
    <a href="" id="home" ev:event="DOMActivate" 
    ev:defaultAction="cancel">Watch again</a>

  </div/>
</body>
</html>

13.6 Integration with CSS Positioning

This section is informative.

Since SMIL Timesheets only describes the temporal dimension of the document, it must be integrated with a host language's layout system. It can be integrated to CSS based layout by affecting the CSS properties of media elements. For instance, the CSS display property controls whether the element is displayed or not. The SMIL Timesheets processor sets the CSS pseudo-class timed-inactive for the media element when the element should not be visible based on the timesheet. Then, with a default rule for the pseudo-class, the CSS property display is set to "none" to the non-visible media element. The pseudo-class overrides element's original display property and the element becomes invisible. When the media element should become visible, the implementation removes the pseudo-class from the element, thus restoring the original value.

The default style sheet should contain a declaration with the pseudo-class called timed-inactive that is used to control the visibility of the media elements:

:timed-inactive { display: none ! important;}

Additionally, the language is extended by defining a class attribute for the item element. It can be used to change style properties of the elements from the timesheet. For example, the author could specify the red background of an element to be changed to blue at some time. This is done by setting the value of class attribute to reference a CSS pseudo-class that is used in the style sheet of the document. The author doesn't have to add the same document element with the same content multiple times with different style properties, but instead only define a pseudo-class for each property change and control them from the timesheet.

previous   next   contents