Introduction to HTML+TIME

Internet Development Index

HTML+TIME (Timed Interactive Multimedia Extensions), first released in Microsoft?Internet Explorer 5, adds timing and media synchronization support to HTML pages. Using a few Extensible Markup Language (XML)-based elements and attributes, you can add images, video, and sounds to an HTML page, and synchronize them with HTML text elements over a specified amount of time. In short, you can use HTML+TIME technology to quickly create multimedia-rich, interactive presentations, easily and with little or no scripting.

HTML+TIME 2.0 is based on the HTML+SMIL language profile Non-Microsoft link in the Synchronized Multimedia Integration Language (SMIL) 2.0 Non-Microsoft link working draft. SMIL 2.0 is the W3C successor to SMIL 1.0. HTML+TIME 2.0 is the successor to HTML+TIME 1.0.

Note  HTML+TIME 2.0 is available in minimal installations of Internet Explorer 5.5 and Internet Explorer 6.

This article covers the following topics:

Benefits

The following section contains information about the benefits of using HTML+TIME.

Dynamic Content

You can use HTML+TIME to add dynamic, interactive content to your Web pages. For example, you can create slide-show-style Web presentations with synchronized text, images, audio, video, and streaming media. You can create these presentations so that they are timed, interactive, or a combination of both.

Ease of Use

To add timing to an HTML document, all you have to do is add some new attributes to existing HTML elements. Thus, you can leverage your existing HTML knowledge when you add timing to your page. The HTML+TIME attributes specify when an element appears on a page, how long it remains displayed, and how the surrounding HTML elements are affected. In addition to the attributes, some new XML-based elements have been created to simplify incorporating media into Web pages. For example, you can use the excl element to specify when a sound file should start playing, when it should stop, and how many times it should repeat.

HTML elements can be grouped into hierarchical relationships to allow for easy manipulation of multiple HTML elements at once. Grouping is also used to specify whether HTML elements appear and disappear sequentially on the page, or use independent timing. Element grouping is specified either by using the t:PAR, t:SEQ, or t:EXCL elements in a document, or by setting the TIMECONTAINER attribute.

Scripting Support

With HTML+TIME, you can use persistent XML elements and attributes to add timing to your HTML page. This means you don't have to know how to program with scripting languages to make your pages more dynamic. However, for people who already know how to use scripting languages, HTML+TIME supports a complete object model that extends the existing DHTML Object Model. Thus, you can use HTML+TIME properties, methods, and events to add even more interactive features to your Web pages.

HTML+TIME Behaviors and Elements

HTML+TIME is implemented as a DHTML default behavior, one of the powerful new features introduced in Internet Explorer 5. For more information about behaviors, see the Related Topics section of this document.

You can use all the HTML+TIME attributes listed in the reference pages with any timed HTML element. For a list of HTML elements that can be timed, see the Applies To section of the time and time2 behavior reference pages.

Internet Explorer 5.5 Update

The HTML+TIME 2.0 Reference lists the features implemented by the time2 behavior and supported in Internet Explorer 5.5 and later.

The HTML+TIME 1.0 Reference lists the features implemented by the time behavior and supported in Internet Explorer 5 and later.

HTML+TIME Timing Model

Most traditional animation runtime systems use either rigid timelines or pure, event-based relationships to model time. The rigid timeline model makes it more difficult to create interactive content. In this environment, you must add "jumps" to another pseudo-timeline to introduce interactive elements. In event-based models, interaction is easier to define, but it is more difficult to create timeline behaviors, such as sequences and precise synchronization of media elements.

HTML+TIME unifies these two timing models, taking the best of each and simplifying the process of authoring timed, interactive content. In the HTML+TIME model, you can use timeline attributes to describe static, or determinate, timeline relationships. This makes it easy to place elements in time and to ensure synchronization among media elements. You can author interactive content using a simple variant on the timeline attributes, where the begin and/or end times are tied to an event. Therefore, the actual begin and/or end values are indeterminate when you author the document. In reality, these times are event-based, but they can be defined as though they had traditional timing. When the associated event occurs, such as a user clicking a button, the indeterminate timing relationship is defined by the time at which the event occurs. At this point, the element is added into the running timeline as though it had been defined from the beginning.

This unified model makes it easy to define an animation that has tightly synchronized media, and to add a number of interactive elements that start when the user does something. The interactive elements can have a duration and repeat count just like other timed elements, even though they begin in response to an event. You can apply a single set of tools for timing and synchronization to any element. This makes the model easier to learn and less complicated, without sacrificing any flexibility.

HTML+TIME defines a schedule, or timeline, for all the affected elements to follow. The document timeline starts as soon as the page loads and continues to progress as long as the browser renders the page. If timing is applied to media elements, such as audio or video files, you can specify that the timeline will be tightly synchronized with other elements or the entire document. By default, media files that are not ready to play when scheduled will slip along the timeline and begin playing as soon as they become available. You can pause and resume the document timeline using methods from the object model.

HTML elements behave differently when you add time attributes, depending on the HTML element type. Although other categories might exist for HTML elements, HTML+TIME primarily distinguishes between content and style elements. Content elements include all elements that describe content to be displayed on the page, including the media elements introduced with HTML+TIME (t:ANIMATION, t:AUDIO, t:IMG, t:MEDIA, and t:VIDEO. Commonly used content elements include p, div, span, and table-related elements. Adding HTML+TIME attributes to a content element causes the element to appear and disappear over time. Style elements describe the style to be applied to an element. Commonly used style elements include b, i, and em. Adding HTML+TIME attributes to a style element causes the style to be applied to and removed from the element over time. For more information about style elements, see the HTML+TIME Implementation Notes section of this document.

Authoring HTML+TIME

Use the following steps to add timing to an HTML element.

Create an XML Namespace

When using any of the HTML+TIME elements, such as the t:EXCL, t:SEQ or t:PAR elements, you must declare the XML namespace t: in the html tag, as shown in the following line of code:

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

To use the namespace, preface HTML+TIME elements with t:. This string identifies the HTML+TIME elements as qualified XML namespace extensions. To establish t: as the namespace, import the time2 behavior into the namespace as shown in the following line of code:

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

Reference the time2 Behavior

You must associate the element with the time2 behavior, so that the element is affected by the document timeline. To accomplish this, you can add the inline STYLE attribute to the HTML element as follows:

<P STYLE="behavior:url(#default#time2)" ...>

However, you might find it easier to associate an element with the time2 behavior by creating a Cascading Style Sheets (CSS) class attribute, as shown in the following sample:

<HTML>
<HEAD>
<STYLE>
.time    {behavior: url(#default#time2);}
</STYLE>
</HEAD>
<BODY>
.
.
.
<P CLASS="time" ...>
.
.
.
</BODY>
</HTML>
Note  It is not necessary to associate the time2 behavior with HTML+TIME elements, such as t:MEDIA, t:AUDIO, and t:VIDEO, because they are defined by the behavior itself.

Specify Beginning and Ending Times

You must specify when the HTML element should appear and for how long. This is accomplished by including the BEGIN and END attributes on the element. You can use the DUR attribute instead of END to specify an ending time relative to the element's BEGIN time. However, there is no functional difference between END and DUR, so you can use either one. If you do not set a BEGIN, END, or DUR time, the default value causes an element to begin displaying when the page loads, and the element remains displayed indefinitely. Therefore, the element appears static, as though you have not set any timing on that element.

The following sample shows lines of text that appear every two seconds and remain displayed for five seconds.

<HTML>
<HEAD>
<STYLE>
.time    {behavior: url(#default#time2);}
</STYLE>
</HEAD>
<BODY>
<P>This text appears right away. More lines to follow...</P>
<P CLASS="time" BEGIN="2" DUR="5" >This appears after 2 seconds.</P>
<P CLASS="time" BEGIN="4" DUR="5">This appears after 4 seconds.</P>
<P CLASS="time" BEGIN="6" DUR="5">This appears after 6 seconds.</P>
<P>This is the last line.</P>
</BODY>
</HTML>
This feature requires Microsoft?Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Include an Action

Although including an action is optional, you might want to use the TIMEACTION attribute to specify the action that is taken while the element is active on the timeline. In the DHTML Object model, two properties are available on the style object for turning on and off the display of an element. HTML+TIME changes the value of these properties over time. With DHTML, you can set the visibility property to hidden or visible. This property reserves space in the layout of the rendered document, as though the element is always visible. Therefore, the document does not reflow its contents as elements are dynamically displayed or hidden.

The default behavior for using HTML+TIME on a content element is TIMEACTION="visibility". In contrast, when the DHTML display attribute is set to none it does not reserve space in the rendered document. Therefore, the document reflows every time the value of the display attribute changes. To reflow the document using HTML+TIME, set the TIMEACTION attribute to display.

As an alternative to displaying and hiding an element, you can set the TIMEACTION attribute to style to make an inline style active on an element. If you use this option, any style property included on the element using the STYLE attribute is applied only while the element is active on the timeline; otherwise, the inline style is ignored. As of Internet Explorer 5.5, you can also modify the style of an element by specifying one or more class names for the TIMEACTION attribute.

When using a time container, you can set the TIMEACTION attribute to none so that it performs no action. When this attribute is set to none, only the child elements of the time container are visually affected while the timeline is active. If an element supports a Boolean on property, you can use a TIMEACTION value of onOff to make the on property true while the timeline is active on the element, or false otherwise.

The following sample shows lines of text that appear every two seconds and remain displayed for five seconds. This is similar to the previous sample, but in this case the document reflows, as necessary, because the TIMEACTION attribute is set to display. The TIMEACTION attribute is set to style on the heading.

<HTML>
<HEAD>
<STYLE>
.time    {behavior: url(#default#time2);}
</STYLE>
</HEAD>
<BODY>
<H1 CLASS="time" BEGIN="0" DUR="11" TIMEACTION="style" STYLE="Color:Red;">timeAction</H1>
<P>This text appears right away. More lines to follow...</P>
<P CLASS="time" BEGIN="2" DUR="5" TIMEACTION="display">This appears after 2 seconds.</P>
<P CLASS="time" BEGIN="4" DUR="5" TIMEACTION="display">This appears after 4 seconds.</P>
<P CLASS="time" BEGIN="6" DUR="5" TIMEACTION="display">This appears after 6 seconds.</P>
<P>This is the last line.</P>
</BODY>
</HTML>
This feature requires Microsoft?Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Exclusive, Sequential and Parallel Time Container Elements

You can use HTML+TIME to specify timing for individual elements displayed on the page. You can also use it to create a timeline that groups elements together and specifies their timing relative to each element's predecessor in the timeline. The following example uses the TIMECONTAINER attribute set to excl to create a time container that allows only one element to play at a time.

<HTML>
<HEAD>
<STYLE>
.time    {behavior: url(#default#time2);}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="time" TIMECONTAINER="excl">
<DIV CLASS="time" BEGIN="0" DUR="2" TIMEACTION="display">First line of text.</DIV>
<DIV CLASS="time" BEGIN="2" DUR="2" TIMEACTION="display">Second line of text.</DIV>
<DIV CLASS="time" BEGIN="4" DUR="2" TIMEACTION="display">Third line of text.</DIV>
<DIV CLASS="time" BEGIN="6" TIMEACTION="display">Fourth line of text.</DIV>
</DIV>
</BODY>
</HTML>
This feature requires Microsoft?Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

You can easily create slide-show-style presentations using timing sequences to display a series of images, one after the other, along with synchronized text. The following example uses the TIMECONTAINER attribute to create a sequential time container.

<HTML>
<HEAD>
<STYLE>
.time    {behavior: url(#default#time2);}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="time" TIMECONTAINER="seq">
<DIV CLASS="time" DUR="2" TIMEACTION="display">First line of text.</DIV>
<DIV CLASS="time" DUR="2" TIMEACTION="display">Second line of text.</DIV>
<DIV CLASS="time" DUR="2" TIMEACTION="display">Third line of text.</DIV>
<DIV CLASS="time" TIMEACTION="display">Fourth line of text.</DIV>
</DIV>
</BODY>
</HTML>
This feature requires Microsoft?Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

You must declare the duration of each element in the sequence. Since the duration is omitted on the last element, it remains displayed indefinitely. Grouping the elements in a sequence makes it easy to manipulate the entire group of elements at once, rather than individually. For example, you can add the BEGIN attribute to the sequence time container to make the entire sequence wait before it begins playing.

If you want to group elements without displaying them in a sequence, you can create a parallel timeline by setting the TIMECONTAINER attribute to par on the time container element. In contrast to a sequence, you can use parallel timelines to display and hide elements without any implicit dependencies on other elements. This allows more than one element to be active on the timeline, and you can have as few or as many elements active on the timeline as you want—there is no minimum or maximum requirement. The following sample shows how a parallel timeline is used for repeating a group of elements with overlapping timelines.

<HTML>
<HEAD>
<STYLE>
.time    {behavior: url(#default#time2);}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="time" REPEATCOUNT="5" DUR="10" TIMECONTAINER="par">
<DIV CLASS="time" BEGIN="0" DUR="4">First line of text.</DIV>
<DIV CLASS="time" BEGIN="2" DUR="4">Second line of text.</DIV>
<DIV CLASS="time" BEGIN="4" DUR="4">Third line of text.</DIV>
<DIV CLASS="time" BEGIN="6" DUR="4">Fourth line of text.</DIV>
</DIV>
</BODY>
</HTML>
This feature requires Microsoft?Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Instead of using the TIMECONTAINER attribute to group HTML elements on a timeline, you can use the t:PAR or t:SEQ elements. For example, in the previous sample that shows a sequence, you could have used the t:SEQ element instead of the div to yield the same results.

The following example declares the XML namespace t: in the html tag and imports the time2 behavior into that namespace because it uses the t:SEQ custom element.

<HTML XMLNS:t ="urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time    {behavior: url(#default#time2);}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<t:SEQ>
<DIV CLASS="time" DUR="2">First line of text.</DIV>
<DIV CLASS="time" DUR="2">Second line of text.</DIV>
<DIV CLASS="time" DUR="2">Third line of text.</DIV>
<DIV CLASS="time">Fourth line of text.</DIV>
</t:SEQ>
</BODY>
</HTML>
This feature requires Microsoft?Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Compatibility

HTML+TIME features are available as of Internet Explorer 5 and are not supported in earlier browser versions. If an earlier version of Internet Explorer or a non-Internet Explorer browser encounters a reference to a behavior, the style is ignored, and the element is rendered as normal on the page. However, scripting errors might occur in cases where the behavior being used exposes properties, methods, or events. To address these errors, you need to use some version-checking script.

Note  HTML+TIME works only if Internet Explorer 5 is installed with the typical set of components. If the minimal installation is used, HTML+TIME content is rendered statically, as though no timing has been defined.

Internet Explorer 5.5 Update

All of the features of the time behavior are still available in Internet Explorer 5.5. However, we strongly recommend that you begin using the time2 behavior, which implements the HTML+SMIL language profile as defined in the working draft of the SMIL 2.0 specification.

HTML+TIME Implementation Notes

The following list contains information about the initial version of HTML+TIME in Internet Explorer 5, including differences between this implementation and the W3C submission.

HTML+TIME Newsgroup

The HTML+TIME newsgroup is a forum for users to share ideas, ask questions, and relay comments about HTML+TIME. The newsgroup is intended for user-to-user support; however, Microsoft does monitor it for product-feedback purposes. To access the newsgroup, use the following information with your favorite newsgroup reader.

Related Topics