previous   next   contents  

6. The SMIL Linking Module

Editor
Lloyd Rutledge (Lloyd.Rutledge@cwi.nl), (CWI)

Table of contents

6.1 Introduction

The SMIL linking module defines the SMIL document elements for navigation hyperlink. These are navigations through the SMIL presentation that can be triggered by user interaction or other triggering events. SMIL provides only for in-line link elements. Links are limited to uni-directional single-headed links (i.e. all links have exactly one source and one destination resource).

XPointer [XPTR] allows components of XML documents to be addressed in terms of their placement in the XML structure rather than on their unique identifiers. This allows referencing of any portion of an XML document without having to modify that document. Without XPointer, pointing within a document may require adding unique identifiers to it, or inserting specific elements into the document, such as a named anchor in HTML. XPointers are put within the fragment identifier part of a URI. The SMIL specification does not require that browsers be able to process XPointers in SMIL URI attributes.

XLink (XML Linking Language) [XLINK] defines a set of generic attributes that can be used when defining linking elements in an XML-encoded language. SMIL borrows some constructs and concepts from XLink, mostly to stay consistent with HTML. SMIL does not conform to XLink.

Both XLink and XPointer are subject to change. At the time of this document's writing, neither is a full W3C recommendation. This document is based on the public Working Drafts ([XLINK], [XPTR]). It may change as these two formats change.

6.2 Linking into SMIL documents

The SMIL Linking Module supports name fragment identifiers and the '#' connector. The fragment part is an id value that identifies one of the elements within the referenced SMIL document. With this construct, SMIL supports locators as currently used in HTML (e.g. it uses locators of the form "http://foo.com/some/path#anchor1"), with the difference that the values are of unique identifiers and not the values of "name" attributes. Of course, this type of link can only target elements with an "id" attribute. Links using fragments enable authors to encode links to a SMIL presentation at the start time of a particular element rather than at the beginning of its presentation. If a link containing a fragment part is followed, the presentation should start as if the user had fast-forwarded the presentation represented by the destination document to the effective begin of the element designated by the fragment. See the discussion of linking to timing constructs in the SMIL Timing and Synchronization Module for more information.

There are special semantics defined for following a link containing a fragment part into a document containing SMIL timing. These semantics are defined in the SMIL Timing and Synchronization Module. In addition, the following rules apply for linking into a document written in the SMIL language:

  1. It is forbidden to link to elements that are the content of <switch> elements. If the element addressed by the link is content of a <switch> element, then the presentation should start with the <switch> element.
  2. If the fragment part id is not defined within the target document, the SMIL presentation should start from the beginning as if no fragment part were present in the URI.

6.2.1 Error handling

When a link into a SMIL document contains an unresolvable fragment identifier ("dangling link") because it identifies an element that is not actually part of the document, SMIL software should ignore the fragment identifier, and start playback from the beginning of the document.

When a link into a SMIL document contains a fragment identifier which identifies an element that is the content of a <switch> element, SMIL software should interpret this link as going to the parent <switch> element instead. If the parent is also a <switch>, then the link should be considered as accessing the first switch ancestor element whose parent is not also a <switch>. The result of the link traversal is thus to play the child of the located <switch> element that passes the usual switch child selection process.

6.3 Link Elements

The link elements allows the description of navigational links between objects.

SMIL linking provides only for in-line link elements. Links are limited to uni-directional single-headed links. That is, all links have exactly one source and one destination resource.

6.3.1 Handling of Links in Embedded Documents

Due to its integrating nature, the presentation of a SMIL document may involve other (non-SMIL) applications or plug-ins. For example, a SMIL browser may use an HTML plug-in to display an embedded HTML page. Vice versa, an HTML browser may use a SMIL plug-in to display a SMIL document embedded in an HTML page. Note that this is only one of the supported methods of integrating SMIL and HTML. Another alternative is to use the merged language approach. See the SMIL Timing and Integration Module for further details.

In embedded presentations, links may be defined by documents at different levels and conflicts may arise. In this case, the link defined by the containing document should take precedence over the link defined by the embedded object. Note that since this might require communication between the browser and the plug-in, SMIL implementations may choose not to comply with this recommendation.

If a link is defined in an embedded SMIL document, traversal of the link affects only the embedded SMIL document.

If a link is defined in a non-SMIL document which is embedded in a SMIL document, link traversal can only affect the presentation of the embedded document and not the presentation of the containing SMIL document. This restriction may be relaxed in future versions of SMIL.

6.3.2 The <a> Element

The functionality of the <a> element is very similar to the functionality of the <a> element in HTML 4.0 [HTML40]. For synchronization purposes, the <a> element is transparent. That is, it does not influence the synchronization of its child elements. <a> elements may not be nested. An <a> element must have an href attribute.

An <a> element can specify several triggers for its traversal simultaneously. For example, the element's content visual media can be selected by the user or the key specified by the accesskey attribute can be typed to trigger a traversal. In cases where multiple triggers are specified, any of them can activate the link's traversal. That is, an "or" is applied to the list of triggering conditions to determine if traversal occurs.

Traversal occurs if one of the conditions for traversal is met during the time that the <A> element is active. The means for determining is an <A> element is active are the same for determining if a media object is playing. This can be done through:

Attributes

href
This attribute contains the URI of the link's destination.
The "href" attribute is required for <a> elements.
sourceVolume
This attribute sets the volume of audio media objects in the presentation containing the link when the link is followed. Ignored if the presentation does not contain audio media objects. This attribute can have the same values as the "volume" property in CSS2 [CSS2].
destinationVolume
This attribute sets the volume of audio media contained in the remote resource. Ignored if the remote resource does not contain audio media. This attribute can have the same values as the "localVolume" attribute.
sourcePlaystate
This attribute controls the temporal behavior of the presentation containing the link when the link is traversed. It can have the following values:

The default value of the "sourcePlaystate" attribute depends on the value of the "show" attribute. If the "show" attribute has the value "new", the default for the "sourcePlaystate" attribute is "play". If the "show" attribute has the value "replace" or the deprecated value "pause", then the default for the "sourcePlaystate" attribute is "pause".

destinationPlaystate
This attribute controls the temporal behavior of the resource identified by the href attribute when the link is followed. It only applies when this resource is a continuous media object. It can have the same values as the "sourcePlaystate" attribute.
show
This attribute specifies how to handle the current state of the presentation at the time in which the link is activated. The following values are allowed:

The default value of "show" is "replace".

accesskey
This attribute assigns a keyboard key whose activation by the user in turn activates this link. It has the same meaning as the attribute of the same name in HTML 4.0 [HTML40].
tabindex
This attribute provides the same functionality as the "tabindex" attribute in HTML 4.0 [HTML40]. It specifies the position of the element in the tabbing order for the current document. The tabbing order defines the order in which elements will receive focus when navigated by the user via the keyboard. At any particular point in time, only elements with an active timeline are taken into account for the tabbing order, and inactive elements that are are ignored for the tabbing order.
target
This attribute defines either the existing display environment in which the link should be opened (e.g. a SMIL region, an HTML frame or another named window), or triggers the creation of a new display environment with the given name. Its value is the identifier of the display environment. If no currently active display environment has this identifier, a new display environment is opened and assigned the identifier of the target. When a presentation uses different types of display environments (e.g. SMIL regions and HTML frames), the namespace for identifiers is shared between these different types of display environments. For example, one cannot use a "target" attribute with the value "foo" twice in a document, and have it point once to an HTML frame, and then to a SMIL region. If the element has both a "show" attribute and a "target" attribute, the "show" attribute is ignored.
actuate
The actuate attribute determines whether or not the link is triggered by some event or automatically traversed when its time span is active. It is the same as the actuate attribute of XLink [XLINK]. Its default value is "onRequest", which means something must trigger the link traversal. This trigger is defined by the user interaction and event attributes of the <A> element. A value of "onLoad" can also be assigned. This value indicates that the link is automatically traversed when its time span is active.
title
Defined in the SMIL Metainformation Module.
id
Standard XML ID attribute, for referential use.
begin
Defined in SMIL Timing and Synchronization module.
dur
Defined in "SMIL Timing and Synchronization" module.
end
Defined in "SMIL Timing and Synchronization" module.

The  <a> element can also have the attributes listed below, with the same syntax and semantics as in HTML 4.0 [HTML40]:

Element Content

The <a> element can be empty or contain the following children:

animation
Defined in section on media object elements.
audio
Defined in section on media object elements.
img
Defined in section on media object elements.
par
Defined in section on par elements.
ref
Defined in section on media object elements.
seq
Defined in section on seq elements.
excl
Defined in section on excl elements.
switch
Defined in section on switch elements.
text
Defined in section on media object elements.
textstream
Defined in section on media object elements.
video
Defined in section on media object elements.

Examples

Example 1

The link starts up the new presentation replacing the presentation that was playing.

<a href="http://www.cwi.nl/somewhereelse.smi">
     <video src="rtsp://foo.com/graph.imf" region="l_window"/>
</a>

Example 2

The link starts up the new presentation in addition to the presentation that was playing.

<a href="http://www.cwi.nl/somewhereelse.smi" show="new">
     <video src="rtsp://foo.com/graph.imf" region="l_window"/>
</a>

This could allow a SMIL player to spawn off an HTML browser:

<a href="http://www.cwi.nl/somewebpage.html" show="new">
     <video src="rtsp://foo.com/graph.imf" region="l_window"/>
</a>

Example 3

The link starts up the new presentation and pauses the presentation that was playing.

<a href="http://www.cwi.nl/somewhereelse.smi" show="new" behavior="pause">
     <video src="rtsp://foo.com/graph.imf" region="l_window"/>
</a>

Example 4

The following example contains a link from an element in one presentation A to the middle of another presentation B. This would play presentation B starting from the effective begin of the element with id "next".

Presentation A:

     <a href="http://www.cwi.nl/presentationB#next">
       <video src="rtsp://foo.com/graph.imf"/>
     </a>


Presentation B (http://www.cwi.nl/presentation):

      ...
      <seq>
        <video src="rtsp://foo.com/graph.imf"/>
        <par>
          <video src="rtsp://foo.com/timbl.rm" region="l_window"/>
          <video id="next" src="rtsp://foo.com/v1.rm" region="r_window"/>
                 ^^^^^^^^^
          <text src="rtsp://foo.com/caption1.html" region="l_2_title"/>
          <text src="rtsp://foo.com/caption2.rtx" region="r_2_title"/>
        </par>
      </seq>
      ...

6.3.3 The <area> Element

The functionality of the <a> element is restricted in that it only allows associating a link with a complete media object. The HTML 4.0 "area" element [HTML40] has demonstrated that it is useful to associate links with spatial portions of an object's visual display.

The semantics of the <area> element in SMIL is the same as it is for HTML in that:

  1. The <area> element allows associating a link destination, specified by the 'href' attribute, with spatial portions of a visual object. In contrast, the <a> element only allows associating a link with complete media.
  2. The <area> element allows making a subpart of the media object the destination of a link, using the "id" attribute.
  3. The <area> element allows breaking up an object into spatial subparts, using the "coords" attribute.

It extends the syntax and semantics of the HTML <area> element by providing for linking from non-spatial portions of the media object's display. These extensions are:

  1. The area element allows breaking up an object into temporal subparts, using the "begin" and "end" attributes. The values of the begin and end attributes are relative to the beginning of the media object.
  2. The area element allows breaking up an XML-defined object into syntactic components, using the "fragment" attribute. The spatial and temporal portion of the display that activates the link is defined in terms of the syntactic structure of that object. This allows portions of the display of XML code integrated in a SMIL presentation to be starting areas for links in SMIL. An example is having an HTML file format the text for a menu of items. These are displayed as part of a SMIL presentation. Each item can be clicked upon to activate a link in the containing SMIL presentation.

The <anchor> element is deprecated in favor of <area>.

Attributes

The  <area> element can have the attributes listed below, with the same syntax and semantics as in HTML 4.0 [HTML40]:

The following lists attributes that are newly introduced by this specification, and attributes that are extended with respect to HTML 4.0 [HTML40]:

begin
Defined in SMIL Timing and Synchronization module.
sourcePlaystate
Defined in Section on the <a> element.
show
Defined in Section on the <a> element.
coords
This attribute is extended to be identical with the "coords" attribute in HTML 4.0. That is, it can take the values needed when the "shape" attribute has the value "circle" or "poly".
dur
Defined in "SMIL Timing and Synchronization" module.
end
Defined in "SMIL Timing and Synchronization" module.
sourceVolume
Defined in Section on the <a> element.
destinationVolume
Defined in Section on the <a> element.
destinationPlaystate
Defined in Section on the <a> element.
fragment
This is a media-specific reference to a portion of the media referenced in the "src" attribute of the parent media object. This attribute is used to place a hotspot in a media file that refers back to the containing SMIL presentation. In order for the "fragment" attribute to be used, the media object integrated with the parent media object element must be addressable by the fragment. If the referenced media object is an XML file, then the value of the "fragment" attribute is a fragment identifier, the part that comes after a # in a URI

Editor Note: This functionality is preliminary. The intent of the fragment attribute is to enable linking from an embedded document back into the main SMIL presentation. Several open issues: What mechanism does the player use to insert the link into the embedded document, and what semantics must be adhered to? How does this affect the DOM event flow? What is the interaction with the "coords" attribute?

show
Defined in Section on the <a> element.
tabindex
Defined in Section on the <a> element.
target
Defined in Section on the <a> element.
title
Defined in Section on the <a> element.

Element Content

The <area> element is empty.

Examples

1) Decomposing a video into temporal segments

In the following example,  the temporal structure of an interview in a newscast (camera shot on interviewer asking a question followed by shot on interviewed person answering ) is exposed by fragmentation:

<smil>
  <body>
    <video src="video" title="Tom Cruise interview 1995" >
      <seq>
        <area id="firstQ" dur="20s" title="first question" /> 
        <area id="firstA" dur="50s" title="first answer" />
      </seq>
    </video>
  </body>
</smil>

2) Associating links with spatial segments In the following example, the screen space taken up by a video clip is split into two sections. A different link is associated with each of these sections.

<smil>
  <body>
    <video src="video" title="Tom Cruise interview 1995" >
      <area shape="rect" coords="5,5,50,50" 
              title="Journalist" href="http://www.cnn.com"/>
      <area shape="rect" coords="5,60,50,50" 
              title="Tom Cruise" href="http://www.brando.com" />
   </video>
  </body>
</smil>

3) Associating links with temporal segments

In the following example, the duration of a video clip is split into two sub-intervals. A different link is associated with each of these sub-intervals.

<smil>
  <body>
    <video src="video" title="Tom Cruise interview 1995" >
      <seq> 
        <area dur="20s" title="first question" 
              href="http://www.cnn.com"/>
        <area dur="50s" title="first answer" 
              href="http://www.brando.com"/>
      </seq>
   </video>
  </body>
</smil>

4) Associating links with spatial subparts

In the following example, the screen space taken up by a video clip is split into two sections. A different link is associated with each of these sections.

<video src="http://www.w3.org/CoolStuff">
  <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>

5) Associating links with temporal subparts

In the following example, the duration of a video clip is split into two subintervals. A different link is associated with each of these subintervals.

<video src="http://www.w3.org/CoolStuff">
  <area href="http://www.w3.org/AudioVideo" begin="0s" end="5s"/>
  <area href="http://www.w3.org/Style"      begin="5s" end="10s"/>
</video>

6) Jumping to a subpart of an object

The following example contains a link from an element in one presentation A to the middle of a video object contained in another presentation B. This would play presentation B starting from second 5 in the video. That is, the presentation would start as if the user had fast-forwarded the whole presentation to the point at which the designated fragment in the "CoolStuff" video begins.

Presentation A:

<a href="http://www.cwi.nl/mm/presentationB#tim">
   <video id="graph" src="rtsp://foo.com/graph.imf" region="l_window"/>
</a>


Presentation B:

<video src="http://www.w3.org/CoolStuff">
  <area id="joe" begin="0s" end="5s"/>
  <area id="tim" begin="5s" end="10s"/>
</video>

7) Combining different uses of links

The following example shows how the different uses of associated links can be used in combination.

Presentation A:

<a href="http://www.cwi.nl/mm/presentationB#tim">
  <video id="graph" src="rtsp://foo.com/graph.imf" region="l_window"/>
</a>


Presentation B:

<video src="http://www.w3.org/CoolStuff">
  <area id="joe" begin="0s" end="5s" coords="0%,0%,50%,50%"
          href="http://www.w3.org/"/>
  <area id="tim" begin="5s" end="10s" coords="0%,0%,50%,50%"
          href="http://www.w3.org/Tim"/>
</video>

8) Associating links with syntactic subparts

Below is an example with an integrated HTML file that displays a menu of

  link one
  link two

The user can click on one of the menu items, and the matching HTML file is displayed. That is, if user clicks on "link one", the "Link1.html" file is displayed in the "LinkText" region. 

The menu HTML file contains the code:

  <A NAME="link1">link one</A><BR>
  <A NAME="link2">link two</A>

The SMIL file is:

  <smil>
    <head>
      <layout>
        <region id="HTML"     width="100" height="100"/>
        <region id="LinkText" width="100" top   ="100"/>
      </layout>
    </head>
    <body>
      <par>
        <text region="HTML" src="namedanchs.html" dur="indefinite">
          <area fragment="link1" href="#LinkOne"/>
          <area fragment="link2" href="#LinkTwo"/>
        </text>
        <excl -- or something like excl -- dur="indefinite" >
          <text id="LinkOne" region="LinkText" src="Link1.html" dur="indefinite"/>
          <text id="LinkTwo" region="LinkText" src="Link2.html" dur="indefinite"/>
        </excl>
      </par>
    </body>
  </smil>

previous   next   contents