[This local archive copy is from the official and canonical URL, http://toocan.philabs.research.philips.com/misc/atsc/bhtml/sync_atsc_1_0.html; please refer to the canonical source document if possible.]

Synchronization and Transitions in Broadcast HTML

This version:
Addendum Version 1.0 to BHTML Draft 4
Latest version:
Addendum Version 1.0
Previous version:
n/a
Submitted by:
Ted Wugofski, Over the Moon Productions <ted.wugofski@otmp.com>
Copyright:
Copyright  ©  1998 Over the Moon Productions, Inc. (A wholly owned subsidiary of Gateway 2000), All Rights Reserved.

Abstract

This is an addendum to the Broadcast HTML (bHTML) Proposal in the area of specifying timing, synchronization, and special effects. The design is based on functional requirements specified in the Advanced Television Systems Committee (ATSC) specialist group (T3/S17) that is defining the digital television application software environment (DASE).

The bHTML proposal uses style sheets to specify temporal behaviors. Specifically, this working paper proposes transition effect properties (for dissolves, fades, and wipes) and media synchronization properties (for sequencing and control).

Acknowledgements

Special thanks to Rich Chernok (IBM), Aninda Das Gupta (Philips), Warner ten Kate (Philips), and Petr Peterka (GI) for their comments regarding synchronization in earlier drafts of BHTML.

In addition, a great deal of gratitude lies with Philipp Hoschka (W3C) and the SMIL working group for their work on the Synchronized Multimedia Integration Language (SMIL) 1.0 Specification. Much of the design presented here originates from that work.

1.0 Introduction

There are three types of structure associated with a document:

This working paper proposes solutions to specifying the temporal structure of a bHTML document. It assumes that bHTML provides the context and CSS provides spatial structure.

There are three aspects of temporal structure:

Timing relates to when elements start and stop rendering, decoding, or playing. Synchronization related to the relationship between elements when they are rendering, decoding, or playing. Transitions relate to how documents or objects enter or exit the context.

2.0 Timing

The first set of features proposed by this working draft are related to timing. Timing is the relationship between the decoding, playing, or rendering of a media element and a clock source.

2.1 Starting and Stopping on Time

Objects may be started or stopped based on time. The begin property is used to start an object at a certain time. The end property is used to stop an object at a certain time.

2.1.1 The begin property

The begin property specifies the time for the explicit beginning of an element. What the "beginning" of an element means is dependent on the type of element and the transition properties. In general, the beginning of an element corresponds to the object rendering on the display. For example:

<html>
<head>
   <title>Timing Example</title>
</head>
<body>
   <object src="../../media/logo.mpeg" style="begin: 5s"/>
</body>
</html>

This example illustrates an MPEG object that begins rendering 5 seconds after the document begins loading. The begin style property may be assigned any valid clock value or clip value.

The begin property may also be used with behaviors if the EVENT and ACTION elements are adopted from an accompanying working draft. For example:

<html>
<head>
   <title>Timing Example</title>
</head>
<body>
   <event style="begin: 30s">
      <action type="javascript">
         <![CDATA[
            document.write( "ta daa" );
         ]]>   
      </action> 
   </event>
</body>
</html>

In this example, the ACTION element is invoked after 30 seconds. In a similar manner, the timer may be used to automatically invoke a hyperlink:

<html>
<head>
   <title>Timing Example</title>
</head>
<body>
   <event style="begin: 30s">
      <a href="../../tv/full-screen.html"/>
   </event>
</body>
</html>

In this example, the invisible hyperlink to the full-screen.html document is traversed 30 seconds after the current document begins loading. Had the style been attached to the hyperlink directly, as in:

<a href="../../tv/full-screen.html" style="begin: 30s">
Go to full-screen TV</a>

the hyperlink would have been visible (and selectable) after 30 seconds, but not automatically traversed. See temporal hyperlinks for additional information and examples.

2.1.2 The end property

The end property specifies the time for the explicit ending of an element. What the "ending" of an element means is dependent on the type of element. In general, the ending of an element corresponds to the ending of its rendering process. For example:

<html>
<head>
   <title>Timing Example</title>
</head>
<body>
   <object src="../../media/logo.wav" style="end: 15s"/>
</body>
</html>

In this example, an audio file that begins rendering in the normal fashion and stops rendering 15 seconds after the object is loaded. The style sheet mechanism can be used to force multiple objects to stop rendering at roughly the same time:

<html>
<head>
   <title>Timing Example</title>
   <style>
      object.intro { end: "20s" }
      object.demo  { begin: "21s" }
   </style>
</head>
<body>
   <object class="intro" src="../../media/logo.ani"/>
   <object class="intro" src="../../media/intheme.wav"/>
   <object class="demo" src="../../media/demo.mpeg"/>
</body>
</html>

In this final example, the animation logo.ani and the audio intheme.wav stop after 20 seconds and an MPEG file demo.mpeg is started.

If the end property is not specified, the duration is considered to be indefinite. This means that the end is undefined and the element will complete rendering when it completes rendering. It does not mean that the element will repeat rendering indefinitely. To repeat an object, use the repeat property or the repeat-dur property.

In the examples given for the begin property and the end property, the timer used for signalling the begin and end of the rendering was keyed to when the document begins loading (i.e., when the document is made available in the DOM). Alternatives can be specified using the clock-source attribute:

<html>
<head>
   <title>Timing Example</title>
</head>
<body>
   <object src="../../media/logo.mpeg" style="begin: 5s; clock-source: onLoad"/>
</body>
</html>

In this example, the OBJECT element will begin rendering 5 seconds after the document has been loaded. See the section on clock sources for information on other values for this attribute.

Since this proposal uses the style mechanism for defining timing properties, clock sources may be applied across elements and classes in a similar manner as styles:

<html>
<head>
   <title>Timing Example</title>
   <style>
      body { clock-source: "onLoad" }
   </style>
</head>
<body>
   <object src="../../media/logo.mpeg" style="begin: 5s/>
</body>
</html>

In this example, all timers will start after the document is fully loaded.

2.2 Repeating Content

Objects may be repeatedly "rendered" or "played" for a number of iterations or for a period of time. The repeat property is used to repeat for a number of iterations. The repeat-dur property is used to repeat for a period of time.

2.2.1 The repeat property

The repeat property specifies how many times an element is rendered. This may be desired to repeat an audio file for a number of durations:

<html>
<head>
   <title>Timing Example</title>
</head>
<body>
   <object src="../../media/logo.wav" style="repeat: 5"/>
</body>
</html>

In this example, the logo.wav audio file is repeated from end-to-end 5 times.

2.2.2 The repeat-dur property

The repeat-dur property is used to repeat an object for an amount of time, rather than for a number of iterations.

<html>
<head>
   <title>Timing Example</title>
</head>
<body>
   <object src="../../media/logo.wav" style="repeat-dur: 15s"/>
</body>
</html>

In this example, the logo.wav audio file is repeated from end-to-end for 15 seconds. If the file is not completed at the end of 15 seconds, it should still stop playing or rendering. The repeat-dur property may also have the value of indefinite, in which case the element will be repeated indefinitely.

Note: In the case that the value of the end property occurs before the value of the repeat or repeat-dur property, the end property takes precedence. For example:

<html>
<head>
   <title>Timing Example</title>
   <style>
      object.intro { end: "10s" }
   </style>
</head>
<body>
   <object class="intro" src="../../media/intro.ani"/>
   <object class="intro" src="../../media/logo.wav" style="repeat-dur: 15s"/>
</body>
</html>

In this example, the logo.wav should stop playing after 10 seconds.

2.2.3 Repeating behaviors

The repeat property may also be used to repeat behaviors. For example:

<event style="begin: 30s; repeat: 5">
   <action type="javascript">
      <![CDATA[
         fly_bird();
      ]]>   
   </action> 
</event>

In this example, the ACTION begins executing 30 seconds after the document begins loading. The ACTION then repeats 5 times before terminating.

2.3 Specifying Segments

This working draft proposes several temporal properties for starting and stopping the rendering or playback of content in temporal segments. Specifically, this document proposes the dur property, clip-begin property, and the clip-end property.

2.3.1 The dur property

The dur property specifies the duration in which the object's rendering or playback. For example:

<object src="../../media/intro.ani" style="dur: 10s"/>

In this example, the intro.ani animation is rendered for a period of 10 seconds. At the end of the 10 seconds, the animation is stopped. Whether or not the animation completes with a "freeze-frame" or whether the animation becomes invisible is a behavior specified by the content decoder. Likewise, the actual behavior of other object types at the end of the duration is dependent on the type of object. Scripts could be used to define a more deterministic behavior:

<object id="ani" src="../../media/intro.ani" style="dur: 10s">
   <event name="onMediaEnd">
      <action type="javascript">
      <![CDATA[
         document.all.ani.visibility="hidden";
      ]]>   
      </action>      
   </event>
</object>

See the section on event handling for more information on the onMediaEnd event and other events.

2.3.2 The clip-begin property

The clip-begin property may be used to instruct the content decoder to advance the media to the specified time before beginning playback. For example:

<object src="../../media/intro.ani" style="clip-begin: 5s"/>

In this example, the intro.ani animation starts rendering 5 seconds from the beginning of the media.

2.3.3 The clip-end property

The clip-end property may be used to instruct the content decoder to stop the media at a particular time. For example:

<object src="../../media/intro.ani" style="clip-end: 15s"/>

In this example, the intro.ani animation stops rendering 15 seconds after the beginning of the media.

The clip-end property may also be combined with the clip-begin property to specify a segment of the media:

<object src="../../media/intro.ani" style="clip-begin: 5s; clip-end: 15s"/>

In this example, the intro.ani animation starts rendering 5 seconds from the beginning of the media, and stops rendering 15 seconds after the beginning of the media. In general, this is equivalent to setting the dur property to 10s:

<object src="../../media/intro.ani" style="clip-begin: 5s; dur: 10s"/>

There may be a difference if the clock source for the clip-begin and clip-end properties is different than the clock source for the dur property. See the section on identifying clock sources.

2.3.4 Repeating segments

Using a combination of the clip-begin, clip-end, and repeat properties, one can repeat a segment:

<html>
<head>
   <title>Timing Example</title>
</head>
<body>
   <object src="../../media/logo.wav" style="clip-begin: 5s; 
      clip-end: 15s; repeat: 5"/>
</body>
</html>

In this example, the logo.wav audio file will play from 5 seconds to 15 seconds for 5 iterations.

2.4 Identifying Clock Sources

Unless otherwise specified, the system (platform executing the user agent) is responsible for providing the clock source for timing and sychronization. Certain element types, through content decoders and media streams, are also able to provide timing and sychronization information. Therefore, a mechanism is provided for specifying clock sources other than the system. The clock-source and clip-source properties are used to specify the clock source.

Another aspect of the timing is when the clock begins. The clock-start property is used to specify when the timing has started.

2.4.1 The clock-source property

The clock-source property is used to specify the source for the timing and synchronization for an element or group of elements. This property may have the following values:

The system value is used when the element should use the system clock as a clock source. This is the default value for top-level elements (those immediately encapsulated by the BODY element). If an element cannot provide a clock, it uses the system clock. Most of the examples in this working paper use the system value by default.

The "id" value is the value of an element's id attribute. This value is used when the element should use the timing information provided by the referenced object. If the object cannot provide a clock source, the system clock is used.

<html>
<head>
   <title>Timing Example</title>
</head>
<body>
   <object id="tv" src="tv"/>
   ... rest of document ...
   <object src="../../media/spinlogo.ani" style="clock-source: tv"/>
</body>

In this example, the spinlogo.ani uses the "tv" as its clock source (depending on the implementation of the "tv", this could be a frame or field rate, presentation time stamp, etc.)

2.4.2 The clip-source property

The clip-source property is used to specify the source for the media segment properties (dur, repeat-dur, clip-begin, and clip-end properties). This property may have the following values:

The system value is used when the element should use the system clock as a clock source.

The self value is used to indicate that the content decoder (player) should use its own timing information for evaluating the media segment properties. This is the default value.

2.4.3 The clock-start property

The clock-start property is used to specify when the timing aspect of a clock source starts. This property may have the following values:

The immediate value is used to indicate that timing starts as soon as the clock source is available (usually when a document begins loading). This is the default value.

The onload value is used to indicate that timing starts after the entire document has been loaded.

<html>
<head>
   <title>Timing Example</title>
</head>
<body>
   <object src="../../media/logo.mpeg" 
      style="begin: 5s; clock-source: onload"/>
   ... rest of document ...
</body>
</html>

In this example, the logo.mpeg file begins executing 5 seconds after the entire document has been loaded.

The clock-start property has no effect on the media segment properties. The media segment properties (dur, repeat-dur, clip-begin, and clip-end properties) have timing based on the start of the media.

2.4.4 Clock values

Clock values have the following syntax:

Clock-val             ::= Full-clock-val | Partial-clock-val | Timecount-val
Full-clock-val        ::= Hours "," Minutes "," Seconds ("." Fraction)?
Partial-clock-val     ::= Minutes "," Seconds ("." Fraction)?
Timecount-val         ::= Timecount ("." Fraction)?
                          ("h" | "min" | "s" | "ms")? ; default is "s"
Hours                 ::= 2DIGIT; any positive number
Minutes               ::= 2DIGIT; range from 00 to 59
Seconds               ::= 2DIGIT; range from 00 to 59
Fraction              ::= DIGIT+
Timecount             ::= DIGIT+
2DIGIT                ::= DIGIT DIGIT
DIGIT                 ::= [0-9]

The following are examples of legal clock values:

2.4.5 Clip values

Clip values have the following syntax:

 
Clip-time-value   ::= Metric "(" ( Clock-val | Smpte-val ) ")"
Metric            ::= Smpte-type | "npt"
Smpte-type        ::= "smpte" | "smpte-30-drop" | "smpte-25"
Smpte-val         ::= Hours "," Minutes "," Seconds 
                      [ "," Frames [ "." Subframes ]]
Hours             ::= 2DIGIT
Minutes           ::= 2DIGIT
Seconds           ::= 2DIGIT
Frames            ::= 2DIGIT
Subframes         ::= 2DIGIT

The value of these properties consists of a metric specifier, followed by a time value whose syntax and semantics depend on the metric specifier. The following formats are allowed:

SMPTE Timestamp
SMPTE time codes [SMPTE] can be used for frame-level access accuracy. The metric specifier can have the following values:
smpte
smpte-30-drop
These values indicate the use of the "SMPTE 30 drop" format with 29.97 frames per second. The "frames" field in the time value can assume the values 0 through 29. The difference between 30 and 29.97 frames per second is handled by dropping the first two frame indices (values 00 and 01) of every minute, except every tenth minute.
smpte-25
The "frames" field in the time specification can assume the values 0 through 24.
The time value has the format hours:minutes:seconds:frames.subframes. If the frame value is zero, it may be omitted. Subframes are measured in one-hundredth of a frame. For example: 
<object ... style="clip-begin= smpte(10,12,33,20)" ... />
Normal Play Time
Normal Play Time expresses time in terms of clock values. The metric specifier is "npt", and the syntax of the time value is identical to the syntax of clock values. Examples: 
<object ... style="clip-begin= npt(123.45s)" ... /> 
<object ... style="clip-begin= npt(12,05,35.3)" .. />

2.4.6 PTS reference values

PTS reference values are references inside of a bHTML document to values that appear in a real-time data stream. When the reference value is seen in the real-time data stream, the presentation time stamp of the data packet containing the reference value is used to synchronize with presentation time stamp of the sync-source element.

It is the responsibility of the user agent to monitor the digital television demultiplexer and decoder for the current PTS value. PTS references may have the following values:

 
Ptsref-value      ::= pts "(" 4DIGIT ")"

We should consider adding additional meaning to the PTS reference value. We could use the reference value to ready (prime) the system for the arrival of the actual PTS reference value. An example, the value might be a time offset from the start of the program or a SMPTE time stamp.

An example of using a PTS reference value:

<html>
<head>
   <title>Timing Example</title>
   <style>
      object.intro { sync-type: par; sync-source: tv }
   </style>
</head>
<body>
   <object id="tv" src="tv"/>
   <object class="intro" src="../../media/logo.ani" style="begin: pts(0034); end: pts(0035)"/>
   ... rest of document ...
</body>

In this example, we get a "sneak preview" of the sync-type and sync-source properties. The logo.ani is synchronized to the "tv" object; it is displayed when the PTS for the "tv" object is equal to the PTS of the data packet containing the PTS reference value of 34. Likewise, the animation is stopped when the PTS for the "tv" object is equal to the PTS of the data packet containing the PTS reference value of 35.

Note: this section on presentation time stamps is very much work in progress. Considerable cooperation must be made with the appropriate digital television standards organizations.

It is not the intention of this design to limit synchronization in DASE receivers to the method described above. The author believes that this simple design solves some synchronization problems but not all. Specifically, the author believes that this solution is viable for synchronization in which tight start frame and end frame synchronization is important and precaching of behavior is required. The author believes that alternative approaches may be necessary when frame-by-frame synchronization is required (as in MPEG-4).

3.0 Synchronizing Content

Beginning and ending the playback or rendering of objects with respect to time is just one feature provided by this proposal. A second feature of this proposal is to synchronize the playback of objects with respect to other objects.

3.1 Starting in Sync

Objects may be started in sync with one another. The sync-type property is used to specify the type of synchronization and the sync-source property is used to specify the source for the synchronization.

3.1.1 The sync-type property

The sync-type property is used to specify whether multiple elements are synchronized in parallel or sequentially. The sync-type property may have the following values:

The sync-type property has the value of par when elements should be synchronized in parallel:

<html>
<head>
   <title>Timing Example</title>
</head>
<body>
   <div class="sync-type: par">
      <object class="intro" src="../../media/intro.ani"/>
      <object class="intro" src="../../media/logo.wav"/>
   </div>
</body>

In this example, the intro.ani and logo.wav media objects start rendering in parallel.

The sync-type property has the value of seq when elements should be rendered sequentially:

<html>
<head>
   <title>Timing Example</title>
   <style>
      object.slide { position: absolute; top: 100; left: 50 } 
   </style>
</head>
<body>
   <div style="sync-type: seq; repeat-dur: indefinite; dur: 10s">
      <object class="slide" src="../../media/image1.gif"/>
      <object class="slide" src="../../media/image2.gif"/>
      <object class="slide" src="../../media/image3.gif"/>
   </div>
</body>

In this example, a slide show of three images is repeated indefinitely.

The accuracy of synchronization between elements that are rendered in parallel is generally implementation-dependent.

3.1.2 Using the class attribute for synchronization

The class attribute may also be used to denote synchronization. Using the class attribute makes it easy to synchronize media objects that are spatially dislocated:

<html>
<head>
   <title>Timing Example>
   <style>
      object.intro { sync-type: par }
   </style>
</head>
<body>
   <object class="intro" src="../../media/intro.ani"/>
   ... rest of document ...
   <object class="intro" src="../../media/spinlogo.ani"/>
</body>

In this example, two animations are rendered in parallel, one at the top of the document and another at the bottom of the document.

3.1.3 The sync-source property

The sync-source property is used to specify the element that is providing the source of the synchronization clock. The sync-source property may have the following values:

The soft value is used to indicate that there is no synchronization clock. This is the default value. When there is no synchronization clock, each element within the same sync-type starts at the same time, but continues independently.

The system value is used to indicate that the system clock will provide timing information.

The "id" value is the value of an element's id attribute. If the sync-source has the value of an element's id attribute, that element provides the synchronization clock. This is particularly useful for providing timing information from a streaming media source:

<html>
<head>
   <title>Timing Example</title>
   <style>
      object.intro { sync-type: par; sync-source: tv }
   </style>
</head>
<body>
   <object id="tv" src="tv"/>
   <object class="intro" src="../../media/intro.ani"/>
   ... rest of document ...
   <object class="intro" src="../../media/spinlogo.ani"/>
</body>

In this example, the two animations receive their synchronization clocks from the "tv" object.

3.1.4 Interpreting the begin property and others during synchronization

When the begin property, and others, are used within a synchronization, they specify timing within the synchronization:

<html>
<head>
   <title>Timing Example</title>
   <style>
      object.intro { sync-type: par }
   </style>
</head>
<body>
   <object class="intro" src="../../media/intro.ani"/>
   ... rest of document ...
   <object class="intro" style="begin: 5s" src="../../media/spinlogo.ani"/>
</body>

In this example, the two animations are rendered in parallel, but the second animation, spinlogo.ani starts 5 seconds after the first. If the sync-source property is specified, the delay can be relative to an element within the synchronization:

<html>
<head>
   <title>Timing Example<title>
   <style>
      object.intro { sync-type: par }
   </style>
</head>
<body>
   <object id="splash" class="intro" src="../../media/intro.ani"/>
   ... rest of document ...
   <object class="intro" style="begin: smpte(0,5,33,20) ; 
      sync-source: splash" src="../../media/spinlogo.ani"/>
</body>

In this example, the spinlogo.ani animation starts rendering in parallel to the intro.ani animation when it has reached the specified frame. This same mechanism may be used to trigger events:

<html>
<head>
   <title>Timing Example</title>
   <style>
      object.intro { sync-type: par }
   </style>
</head>
<body>
   <object id="splash" class="intro" src="../../media/intro.ani"/>
   ... rest of document ...
   <event class="intro" style="begin: smpte(0,5,33,20) ; 
      sync-source: splash" />
      <action type="javascript">
         <![CDATA[
            document.write( "ta daa" );
         ]]>   
      </action>
   </event>
</body>

In this example, the javascript function is called at the specified frame.

3.2 Stopping in Sync

In addition to objects starting in sync, objects may be stopped in sync with one another. The endsync property is used to specify which element an object should synchronize its completion.

3.2.1 The endsync property

The endsync property is used to specify which element an object should synchronize its completion:

<html>
<head>
   <title>Timing Example</title>
</head>
<body>
   <div style="sync-type: par">
      <object id="intro" src="../../media/intro.ani"/>
      <object src="../../media/theme.wav" style="endsync: intro"/>
   </div>
</body>

In this example, the intro.ani and theme.wav media objects start rendering in parallel. The endsync property specifies that the theme.wav should play until the intro.ani is complete.

3.2.2 Repeating until another element stops

Another common behavior is to repeat an element until another element ends. Using a previous example of an audio file that is played during an animation, we would rather repeat the audio file until the animation is complete:

<html>
<head>
   <title>Timing Example</title>
</head>
<body>
   <div style="sync-type: par">
      <object id="intro" src="../../media/intro.ani"/>
      <object src="../../media/theme.wav" style="repeat-dur: indefinite; 
         endsync: intro"/>
   </div>
</body>
</html>

3.3 Temporal Hyperlinks

There are two types of temporal hyperlinks provided through the mechanism specified in this proposal: temporal map hyperlinks and timed hyperlinks.

3.3.1 Temporal map hyperlinks

Temporal map hyperlinks are related to time segments within a media object:

<html>
<head>
   <title>Timing Example</title>
</head>
<body>
   <object id="demo" src="../../media/demo.ani">
      <a href="../intro.html" style="clip-begin: 0s; clip-end: 5s">
      <a href="../main.html" style="clip-begin: 5s; endsync: demo">
   </object>
</body>
</html>

In this example, the video object is divided into two subintervals. The first subinterval starts at the beginning of the animation and lasts for 5 seconds. During this time, the intro.html hyperlink is active. The second subinterval starts at 5 seconds and lasts until the demo.ani is complete. During this time, the main.html hyperlink is active.

3.3.2 Timed hyperlinks

Timed hyperlinks are related to hyperlinks that are turned on or off according to time or synchronization:

<html>
<head>
   <title>Timing Example</title>
</head>
<body>
   <object id="demo" src="../../media/demo.ani"/>
   <a href="../intro.html" style="begin: 0s; end: 5s">Go to Intro</a>
   <a href="../demo.html" style="begin: 5s">Go to Demo</a>
</body>
</html>

In this example, the intro.html hyperlink is active for the first 5 seconds and the demo.html hyperlink is active for the remainder.

4.0 Special Effects

A third set of features proposed by this working draft are transition special effects. Transitions are a set of properties that let a content developer specify the way in which objects appear or disappear on the display surface. These properties may also extend across hyperlinks such that entire documents may demonstrate transition effects.

4.1 The transition-style property

The transition-style property is used to specify the nature of an object transition. This property affects the appearance of an object and may have the following values:

none
This is the default value. The transition is not specified.
blinds
This is a striping effect similar to opening or closing blinds.
box
The element appears as if it is clipped to a box (either inside the box or outside the box.
checkerboard
The element appears as a collection of boxes that stripe-in.
cut
The element appears immediately in whole.
cutfromblack
The element's region is blacked and then the element appears immediately in whole.
dissolve
The element appears through a dithering pattern.
fade
The element's region is blacked and then the element appears through a dithering pattern.
uncover
The element appears as though the existing region is being moved to uncover the element.
wipe
The element appears as though it is painted on top of the existing region in adjacent bands.

These transition effects may be applied to an object:

<html>
<head>
   <title>Timing Example</title>
   <style>
      object.intro { sync-type: par }
   </style>
</head>
<body>
   <object style="transition-style: dissolve" src="../../media/logo.gif"/>
</body>

In this example, the logo.gif appears on the page using the dissolve effect. Transitions may also be applied across a sequence of elements:

<html>
<head>
   <title>Timing Example</title>
   <style>
      div.slideshow { transition-style: dissolve; sync-type: seq; 
                      dur: 10s; repeat-dur: indefinite } 
      object.slide { position: absolute; top: 100; left: 50 } 
   </style>
</head>
<body>
   <div class="slideshow">
      <object class="slide" src="../../media/image1.gif"/>
      <object class="slide" src="../../media/image2.gif"/>
      <object class="slide" src="../../media/image3.gif"/>
   </div>
</body>

In this example, each image in the "slide show" appears using the dissolve effect. Lastly, transitions may be applied to the document as a whole:

<html>
<head>
   <title>Timing Example</title>
</head>
<body style="transition-style: dissolve">
   <object src="../../media/logo.mpeg" style="begin: 5s"/>
</body>
</html>

4.2 The transition-start property

The transition-start property specifies the relationship between the transition and the beginning of the element (the value of the begin property). The transition-start property may have the following values:

hard
The hard value is used to indicate that the begin value indicates the time at which the element is fully rendered. In other words, decoding of the element should begin prior to the value of begin and fully presented at the value of begin (much like a presentation time stamp).
soft
The soft value is used to indicate that the begin value indicates the time at which the element begins rendering. This value is the default (although certain DASE profiles may have a different default).

As an example, consider:

<html>
<head>
   <title>Timing Example</title>
</head>
<body style="transition-style: dissolve; transition-start: hard">
   <object src="../../media/logo.mpeg" style="begin: 5s"/>
</body>
</html>

In this example, the logo begins dissolving to the screen prior to 5 seconds and completes rendering at 5 seconds. This level of control is necessary for tight synchronization to streaming video.

4.3 The transition-dir property

The transition-dir property specifies the direction of the transition effect. Not every transition-style property value recognizes each of these transition-dir property value:

dontcare
This is the default. The content decoder or rendering engine determines how the transition is rendered.
in
The transition effect occurs from the outer edges inwards.
out
The transition effect occurs from the center to the outer edges.
left
The transition effect occurs from right to left.
left-down
The transition effect occurs from the upper left corner to the lower right.
left-up
The transition effect occurs from the lower left corner to the upper right.
right
The transition effect occurs from the left to the right.
right-down
The transition effect occurs from the upper right corner to the lower left.
right-up
The transition effect occurs from the lower right corner to the upper left.
up
The transition effect occurs from the bottom to the top.
down
The transition effect occurs from the top to the bottom.
random
The transition effect uses a random direction. The content decoder is responsible for determining the random effect.

4.4 The transition-dur property

The transition-dur property is used to specify the duration of the transition effect (the time from the start of the transition to the end of the transition). The transition-dur property uses the clock source specified by the clip-source property:

<html>
<head>
   <title>Timing Example</title>
   <style>
      div.slideshow { transition-style: dissolve; transition-dur: 1s; 
                      clip-source: self; sync-type: seq; 
		      repeat-dur: indefinite; dur: 10s } 
      object.slide { position: absolute; top: 100; left: 50 } 
   </style>
</head>
<body>
   <div class="slideshow">
      <object class="slide" src="../../media/image1.gif"/>
      <object class="slide" src="../../media/image2.gif"/>
      <object class="slide" src="../../media/image3.gif"/>
   </div>
</body>

In this example, each image in the "slide show" dissolves within 1 second, as determined by the image's content decoder.

5.0 Event Handling

In order to tightly integrate content decoders with bHTML, the content decoders will need to support control interfaces and provide events. The control interfaces allow the user agent to control the content decoder. The events allow the content decoders to provide feedback to the user agent.

Control of Content Decoders

Content decoders and media players will need to support a basic set of interfaces. While the syntax of these interfaces needs to be determined, the following interfaces should be supported:

begin()
Instructs the content decoder to immediately start decoding from the location specified by the setClipBegin interface.
stop()
Instructs the content decoder to immediately stop decoding.
setBeginAt( clock_value )
Specifies when the content decoder should begin decoding, based on the decoder's own clock.
setEndAt( clock_value )
Specifies when the content decoder should end decoding, based on the decoder's own clock.
setClipBegin( clock_value )
Specifies where in the media segment that the content decoder should begin decoding when it is time to decode.
setClipEnd( clock_value )
Specifies where in the media segment that the content decoder should begin decoding when it is time to stop decoding.
setRepeat( number )
Specifies how many times the content decoder should decode the media object.
setRepeatDur( clock_value )
Specifies how long the content decoder should repeat decoding the media object, based on the content decoder's own clock.
setDur( clock_value )
Specifies how long the content decoder should decode the media object, based on the content decoder's own clock.
setTransitionStyle( transition_style )
Specifies which transition style to apply.
setTransitionStart( transition_start )
Specifies when the transition should start.
setTransitionDir( transition_dir )
Specifies the direction for the transition style.
setTransitionDur( clock_value )
Specifies the duraction of the transition.

Responding to Content Decoders

In addition to the control interfaces into the content decoder, content decoders should generate events that are made available to the user agent:

onMediaBegin
This event is inserted when the content decoder begins decoding (or rendering) the media element from the start of the media.
onEndofMedia
This event is inserted when the end of the media is reached by the content decoder. It does not indicate that the media element has stopped rendering (since it may repeat).
onMediaClipBegin
This event is inserted when the content decoder begins decoding an element from the start of a media segment.
onMediaEndofClip
This event is inserted when the content decoder reaches the end of a media segment.
onMediaRepeat
This event is inserted when the content decoder begins repeating the decoding (or rendering) the media element.
onMediaEnd
This event is inserted when the end of the media is reached by the content decoder and it stops decoding or rendering.

In addition to these events, content decoders may generate custom events if the accompanying proposal for the EVENT and ACTION elements are used.

Appendix A. Table of Properties

Style PropertyValuesInitial ValueDescription
begin clock value | clip value | ptsref value 0 Time to begin decoding
clip-begin clock value | clip value | ptsref value 0 Start of media segment
clip-end indefinite | clip value | ptsref value indefinite End of media segment
clip-source system | self self Clock source for decoding a media segment
clock-source system | %id system Clock source for decoding
clock-start immediate | onload immediate Specifies when timer starts
dur indefinite | clock value | clip value indefinite The length of time to decode
end indefinite | clock value | clip value | ptsref value indefinite Time to end decoding
endsync none | %id none Object to synchronize ending
repeat number 1 Number of iterations to decode
repeat-dur indefinite | clock value | clip value indefinite Duration to repeat decoding
sync-source system | %id system Clock source for synchronizing
sync-type none | par | seq none Type of synchronization
transition-dir dontcare | in | out | left | left-down | left-up | right | right-down | right-up | up | down | random dontcare Direction of the transition
transition-dur indefinite | clock value | clip value indefinite Duration of the transition
transition-start hard | soft soft Nature of transition timing
transition-style none | blinds | box | checkerboard | cut | cutfromblack | dissolve | fade | uncover | wipe none Type of transition