Multimedia Extensions to HTML+TIME

February 15, 1999

There are two ways to create multimedia extensions that leverage the model presented by HTML+TIME. One is to express your content using Microsoft® DirectAnimation™. The other is to provide a Microsoft ActiveX® control that implements the ITIMEMediaPlayer interface. HTML+TIME provides a powerful mechanism for defining timing and synchronization relationships between HTML and media elements. The implementation that is part of Microsoft Internet Explorer 5 provides an architecture that enables content developers to extend and introduce new representations in the Extensible Markup Language (XML) multimedia space, while taking advantage of the timing and synchronization attributes specified through HTML+TIME. Custom representations can be created to express data visualization concepts, three-dimensional (3-D) models, interactive media animations, and audio and visual content.

This article contains the following sections.

DirectAnimation and HTML+TIME

The implementation of HTML+TIME in Internet Explorer 5 relies on DirectAnimation , a powerful component of Microsoft Windows®. The DirectAnimation run-time application enables time-varying, media-rich content and animations to be expressed in self-contained objects. These objects encapsulate both media and the behaviors that change properties of the media over time. For every HTML element with an associated HTML+TIME timeline, you can access DirectAnimation behaviors with the following properties via script.

Property	Description
progressBehavior	A number behavior that ranges from 0.0 to 1.0, indicating the current degree of completion of the behavior.
onOffBehavior	A Boolean behavior that equals true when the element is active and false when it is not active.
timelineBehavior	A number behavior that represents the timeline of the behavior.

The anim:DA element, which is new in Internet Explorer 5, enables content developers to display multimedia content based on DirectAnimation. This element is associated with the default anim behavior object, which exposes the following scripting properties and methods.

Property	Description
image	Sets or retrieves the DirectAnimation image displayed by the anim:DA element.
sound	Sets or retrieves the DirectAnimation sound played by the anim:DA element.
statics	Provides access to the DirectAnimation Statics object, which is required to use the DirectAnimation properties and methods.
Method	Description
addDABehavior	Adds a new behavior to the current animation.
removeDABehavior	Removes a behavior from the current animation.

Combining HTML+TIME and DirectAnimation

To author a Web page that includes HTML+TIME and DirectAnimation content, you will need to be familiar with both technologies. Using DirectAnimation with HTML+TIME enables you to synchronize animations with timed dynamic HTML content. Because complex timelines can easily be created using HTML+TIME elements and attributes, it also reduces the amount of scripting necessary to create the desired animation behaviors. HTML+TIME timelines can exist independently from an animation on a page, or a timeline can be used to control some aspect of an animation, such as changing a property's value over time.

When authoring pages containing DirectAnimation and HTML+TIME, you need to do the following:

Include the DirectAnimation Control

To embed DirectAnimation functionality in a Web page, you must include the DirectAnimation ActiveX control. This is easily accomplished by placing the new anim:DA element in your file. First, declare the XML element and its associated behavior in the document's HEAD section, as follows:

<HEAD>
<XML:NAMESPACE PREFIX="anim"/>
<STYLE>
anim\:DA{ behavior: url(#default#anim); }
</STYLE>
</HEAD>

After declaring the anim:DA element in the XML namespace, include it in the BODY section of your document:

<anim:DA ID="da1" STYLE="width:200; height:200;" />

You can specify the size and position of the DirectAnimation viewer with the STYLE attribute. As an alternative to using the anim:DA element, you can include the DAViewerControl directly with the OBJECT element.

Apply HTML+TIME to an Element

At least one HTML element in the document must have an HTML+TIME timeline associated with it. This will provide a behavior that can drive the animation displayed by the anim:DA element. In order to obtain timeline information, retrieve the behavior properties of the object containing a timeline. You can easily reference this object by specifying an identifier with the ID attribute, as shown here:

<SPAN ID="mySpan" STYLE="behavior:url(#time);" t:BEGIN="5" t:DUR="10">
    This text is displayed for ten seconds, starting five seconds after the page loads.
</SPAN>

In addition to adding time to an element, you must include the time object on this HTML page to ensure compatibility with future versions of Internet Explorer.

<OBJECT ID="time" CLASSID="CLSID:476C391C-3E0D-11D2-B948-00C04FA32195">
</OBJECT>

Using the previous example, you can obtain the progress of the timeline with the following script.

var pro = mySpan.progressBehavior;

Create the Animation with Script

Now that the anim:DA element and an HTML+TIME timeline are included in your page, you can create an animation using all the properties and methods available through DirectAnimation. To access all of these properties and methods, you must use the statics property on the object created with the anim:DA element. For example, if the ID of the anim:DA element is da1, you can obtain the statics library object with the following script.

var m = da1.statics;

At this point, you can create animations with images, text, two-dimensional shapes, 3-D geometries, movies, and sounds. A detailed discussion of DirectAnimation is beyond the scope of this article; for further information, see the DirectAnimation SDK .

Example

The following example shows how to use the HTML+TIME timeline on an element to control an animation. Two seconds after the page loads, the inline style will be applied to the H3 element, changing the color of the text to red for a duration of four seconds. While the H3 element is active on the timeline, the DirectAnimation image below it will rotate exactly once. The DirectAnimation viewer is included on the page with the anim:DA element.

Sample Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>DirectAnimation</TITLE>
<XML:NAMESPACE PREFIX="t"/>
<XML:NAMESPACE PREFIX="anim"/>

<STYLE>
.time       { behavior: url(#TIME); }
anim\:DA{ behavior: url(#DEFAULT#ANIM); }
</STYLE>
<OBJECT ID="time" CLASSID="CLSID:476C391C-3E0D-11D2-B948-00C04FA32195">
</OBJECT>
</HEAD>

<BODY TOPMARGIN=0 LEFTMARGIN=0 BGPROPERTIES="FIXED" BGCOLOR="#FFFFFF" 
LINK="#000000" VLINK="#808080" ALINK="#000000">
<BR>
<H3 ID="myText" STYLE="color:Red;" CLASS="time" t:TIMEACTION="style" 
    t:BEGIN="2" t:DUR="4">The image rotates while this text is displayed in red.</H3>
<DIV ALIGN="center">
    <anim:DA ID="da1" STYLE="position:relative; top:-50; width:200; 
    height:200; z-index: -1;"/>
</DIV>
<BR>
<BUTTON onclick="myText.beginElement();">Restart</BUTTON>

<SCRIPT LANGUAGE="JScript">
<!--
    // Assign a variable to the DA statics library
    m = da1.statics;
    // Create a DAImage
    img1 = m.ImportImage("/workshop/imedia/directx/docs/da/art/da.gif");   
    // Use the timeline on the <H3> text to drive the rotation.
    // The animated progressBehavior number is multiplied by the number 
    // of radians in a circle. This causes the image to rotate exactly 
    // once for the duration of the timeline, regardless of its length.
    img2 = img1.Transform(m.Rotate2Anim(m.Mul(myText.progressBehavior, 
    m.DANumber(6.28318))));  
    // Set the image to be displayed by the <anim:DA> element
    da1.image = img2;     
//-->  
</SCRIPT>
</BODY>
</HTML>

This sample requires Internet Explorer 5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Creating Custom XML Elements

After you have created an animation, as described above, you might want to create custom XML elements that are used to implement it. Using the previous example, you could create the following XML element.

<prefix:IMAGESPIN SRC="url" />

For further information, see the article Creating Custom XML Multimedia Elements.

ActiveX Control Player

If you already have a media playback engine, as well as a file format, you can incorporate your content into the page timing, and leverage HTML+TIME by implementing the ITIMEMediaPlayer interface as part of an ActiveX control. Your control gets called to play your content in response to the player attribute in an HTML+TIME MEDIA element. The URL of your custom media file is specified with the src attribute on the MEDIA element. For further information, see the article How Media Players Can Use HTML+TIME.

Compatibility

As with HTML+TIME, the features discussed in this article are being introduced in Internet Explorer 5, and are not supported in previous versions of the browser. When accessing these new properties and methods, your Web pages should include version-checking script to avoid scripting errors.