Getting Started with HTML+TIME

  • Article

This topic documents a feature of HTML+TIME 2.0, which is obsolete as of Windows Internet Explorer 9.

HTML+TIME (Timed Interactive Multimedia Extensions) makes it fast and easy to support timed, animated, and multimedia content on your pages. Using a few XML-based elements and attributes, you can synchronize media playback with text and other elements and animate your content without the need for script. Because HTML+TIME adds timing to a document through new attributes on existing HTML elements, you can use your existing HTML knowledge when you add timing to a page. For more complex pages, most of the functionality provided by the time2 behavior is also available for scripting.

What Can I Do With HTML+TIME?

Here's a quick list of ways you can create more dynamic and exciting page content with HTML+TIME.

This overview summarizes how to implement the time2 behavior in your Web pages and provides quick explanations and examples concerning timelines, media elements, and animation.

  • How it Works: the Time2 Behavior 
  • Easy Timeline Control 
  • Support Multimedia Presentations 
  • Animate Content With or Without Script 

How it Works: the Time2 Behavior

Because Microsoft Internet Explorer 5.5 provides support for HTML+TIME through an element behavior, you must add declarations for the time2 behavior to your page. The time2 behavior is available as of Internet Explorer 5.5 in the Microsoft Win32 platform.

The prefix t: associates an element with an XML namespace. You must declare the XML namespace in the html tag of your document when using the element.

<HTML XMLNS:t ="urn:schemas-microsoft-com:time">

You must then import the tag definitions from the time2 behavior by using the IMPORT processing instruction.

<?IMPORT namespace="t" implementation="#default#time2">

Finally, you need to associate your element or elements with the time2 behavior. You can do this inline on a given element:


<DIV STYLE="behavior:url(#default#time2)";}...

If you plan to use HTML+TIME features with more than a couple of elements on the page, you might find it less cumbersome to associate elements with the time2 behavior by creating a Cascading Style Sheets (CSS) class attribute.

<HTML>
<HEAD>
    <STYLE>
        .time {behavior: url(#default#time2);}
    </STYLE>
</HEAD>
<BODY>
    <DIV CLASS="time"...
</BODY>
</HTML>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/jumpstart_template.htm

The Show Me button provides a short page template you can use to get started. Just copy the HTML and paste it into your Web document.

For more information about referencing the time2 behavior, see Introduction to HTML+TIME.

Easy Timeline Control

The HTML+TIME model offers a combination of static and event-based timeline control. Timeline properties like dur (duration), end, and begin describe relationships along a static timeline, which makes it easy to define tightly synchronized timing for media playback. On the other hand, you can also define interactive, event-based timeline attributes. When your event fires on an element, that element's timeline is added to the running timeline as defined by the element's other attributes.

The time container elements available in HTML+TIME are t:PAR, t:SEQ, and t:EXCL. These container elements specify whether the timelines of the elements they contain can run concurrently (t:PAR), sequentially (t:SEQ), or exclusively (t:EXCL). For example, to ensure that a video file and accompanying audio track play at the same time, wrap the two media objects in a t:PAR container.


<t:PAR>
    <t:VIDEO SRC="lion.mpg">
    <t:AUDIO SRC="roar.aiff"/>
</t:PAR>

Alternatively, you might want several elements to play in succession. The t:SEQ container allows you to play multiple elements, relative to the container timeline, without setting a specific begin time for each one.


<t:SEQ ID="parent" BEGIN="0" DUR="indefinite" >
    <DIV ID="div1" CLASS="time" DUR="3">Please...</DIV>
    <DIV ID="div2" CLASS="time" DUR="3">...don't swim in the lake...</DIV>
    <DIV ID="div3" CLASS="time" DUR="3">...late in the afternoon...</DIV>
    <DIV ID="div4" CLASS="time" DUR="3" FILL="hold" >...when the crocodiles 
    come out for exercise.</DIV>
</t:SEQ>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/jumpstart_1.htm

Use the t:EXCL element to specify that only one child element can play at a time, even if overlapping begin and duration values are set for child elements. The following example uses a t:EXCL container instead of t:SEQ. Notice that div1 is interrupted by div4, even though div1 has a duration of 6. Because div3 has no begin time set, it is ignored by the parent t:EXCL container. You can use the t:PRIORITYCLASS element with t:EXCL to set rules for overlapping and interrupting child timelines.


<t:EXCL ID="parent" BEGIN="0" DUR="indefinite" >
    <DIV ID="div1" CLASS="time" BEGIN="0" DUR="6">Please...</DIV>
    <DIV ID="div2" CLASS="time" BEGIN="6" DUR="6">...don't swim in the 
    lake...</DIV>
    <DIV ID="div3" CLASS="time" DUR="3">...late in the afternoon...</DIV>
    <DIV ID="div4" CLASS="time" BEGIN=3 DUR="3" >...when the crocodiles 
    come out for exercise...</DIV>
</t:EXCL>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/jumpstart_2.htm

HTML+TIME offers a number of properties and attributes to help you specify timing details, including begin, dur, fill, repeatCount, repeatDur, speed, accelerate, and restart. For more detailed information about the timing model, see the HTML+TIME Timing Model.

Support Multimedia Presentations

HTML+TIME provides some particularly useful features for supporting multimedia presentations on the page, beginning with a set of XML-defined media elements: audio, img, media, ref, and video. You can control the timeline of a media object by setting its dur, speed, end, and other attributes in the same way you would for another timed element, butHTML+TIME provides more media-specific properties as well.

For example, you can apply timing to sub-clips of a given video or audio file, as long as the file format supports clipping, by setting the clipEnd and clipBegin properties. If your media source will load over a network—and consequently might be delayed in loading—you can determine whether and how the media element's timeline can "slip" relative to the parent element timeline by setting the syncBehavior and syncTolerance properties. Conversely, you can specify that a time container synchronizes playback to a designated element by setting the syncMaster property on that element.

In some cases, you might want to present media files that are appropriate for particular users. If your page displays a video, for example, you might want your page to accompany the video with a soundtrack file in either Spanish or Japanese, depending on the user's language settings. Suppose further that for users who speak neither Spanish nor Japanese, you want your presentation to display a synchronized subtitles file in English and to play background music instead of narration. To accomplish all these distinctions, you can use system test attributes and the t:SWITCH element to play only those elements that match the appropriate system settings. Supported attributes include systemBitrate, systemCaptions, systemLanguage, and systemOverdubOrSubtitle. For more information about using the switch element and system test attributes, see About Content Selection: System Test Attributes and t:SWITCH.

Animate Content With or Without Script

As described in Basics of HTML+TIME Animation, you can add animation effects with HTML+TIME by changing the value of properties over time. Roughly speaking, you can set HTML+TIME attributes and properties on two kinds of elements. By setting timing attributes for content elements, like the familiar DIV element or the t:EXCL time container element, you make those elements appear or disappear over time. Adding timing to a style property, like height or position, causes the style to be applied or removed over time as the value of the property changes. In this way, you can animate elements' content, position, and appearance.

Four elements are available to animate other elements on the page: t:ANIMATE, t:ANIMATECOLOR, t:ANIMATEMOTION, and t:SET. t:ANIMATE is a generic element that can animate most properties of HTML elements. The t:ANIMATECOLOR element does just what you'd expect—changes the value of color properties—whereas t:ANIMATEMOTION animates the top and left properties of an element to change its position. Similarly, the t:SET element enables you to set an attribute or property value for a specified duration, though this setting expires when the duration ends.

The following example uses each of these animation elements to apply simple animation effects to some familiar text. Notice that it's necessary to set a property explicitly on a given DIV in order to animate that property. Furthermore, you must designate each property you want to animate by setting the attributeName property on each animation element. Because each t:ANIMATE, t:ANIMATECOLOR, or t:ANIMATEMOTION element is a child of the DIV it animates, the targetElement property is implied in each case, even though it's set for the animation elements in this example.


<t:PAR>
    <DIV ID="div1" CLASS="time" BEGIN="0" 
    STYLE="background-color:yellow;text-align:center;width:25px;
    position:relative">
    Please...
        <t:ANIMATE id="widen" begin="0" targetElement="div1" 
        attributeName="width" from="25" to="570" calcmode="paced" dur="5" 
        fill="hold"/>
    </DIV>
    <DIV ID="div2" CLASS="time" BEGIN="widen.end">
    ...don't swim in the lake...</DIV>
    <DIV ID="div3" CLASS="time" BEGIN="widen.end + 2" STYLE="color:yellow">
    ...late in the afternoon...
        <t:ANIMATECOLOR id="goblue" begin="widen.end + 2" targetElement="div3" 
        attributeName="color" to="blue" dur="3" fill="hold"/>
    </DIV>
    <DIV ID="div4" CLASS="time" BEGIN="goblue.end" 
    STYLE="position:absolute;top:230px;left:20px">
    ...when the crocodiles come out for exercise.
        <t:ANIMATEMOTION id="upfromunder" begin="goblue.end" 
        targetElement="div4" attributeName="top" from="0, 200" to="0, 5" 
        calcmode="linear" accelerate="0.8" dur="4" fill="hold"/>
    </DIV>
</t:PAR>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/jumpstart_3.htm

In the example above, each successive child timeline is set to begin when the preceding animation ends—in other words, its BEGIN attribute is set relative to the ID of the preceding animation element. However, you could also set those child timelines relative to the parent t:PAR timeline if, for instance, you wanted to coordinate another time container with the animated text shown here.

For more information about using the HTML+TIME animation features, see Basics of HTML+TIME Animation and the HTML+TIME: Animation reference.