 | ||
| ||
HTML+TIME is a new feature in Microsoft® Internet Explorer 5 that 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.
The HTML+TIME support provided in Internet Explorer 5 is an experimental implementation of the HTML+TIME submission 
being reviewed by the World Wide Web Consortium (W3C). This submission extends the SMIL 1.0 Recommendation by directly integrating timing and multimedia functionality into HTML.
This article covers the benefits that HTML+TIME brings to your Dynamic HTML (DHTML) document, lists the behaviors and elements that are related to HTML+TIME, describes the timing model, shows how to author HTML+TIME documents, discusses cross-browser issues that might arise when using HTML+TIME, includes notes related to the HTML+TIME specification, provides newsgroup information, and, finally, provides links to related topics.
The following section contains information about the benefits of using HTML+TIME.
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.
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 AUDIO or VIDEO element to specify when the media should start, 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 will appear and disappear sequentially on the page, or use independent timing. Element grouping is specified by using either the PAR or SEQ element in a document, or by setting the TIMELINE attribute.
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 Document Object Model. Thus, you can use HTML+TIME properties, methods, and events to add even more interactive features to your Web pages.
HTML+TIME is implemented as a DHTML default behavior, one of the powerful new features of Internet Explorer 5. For more information about behaviors, see the Related Topics section of this document.
The following table lists the members supported by HTML+TIME.
| Behaviors | time |
|---|---|
| Elements | ANIMATION, AUDIO, IMG, MEDIA, PAR, SEQ, VIDEO |
| Attributes/Properties | accelerate, autoReverse, begin, beginAfter, beginEvent, beginWith, clipBegin, clipEnd, clockSource, currTime, decelerate, dur, end, endEvent, endHold, eventRestart, img, localTime, onOffBehavior, player, playerObject, progressBehavior, repeat, repeatDur, src, syncBehavior, syncTolerance, timeAction, timeline, timelineBehavior, timeStartRule, type |
| Methods | beginElement, endElement, pause, resume |
| Events | onbegin, onend, onmediacomplete, onmedialoadfailed, onmediaslip, onpause, onrepeat, onresume, onresync, onreverse, onscriptcommand |
HTML+TIME uses XML to extend the DHTML Document Object Model. Therefore, you must preface all the new HTML+TIME elements and attributes with "t:". This string identifies the HTML+TIME elements and attributes as qualified XML namespace extensions. You can use all the HTML+TIME attributes listed in the preceding table with any timed HTML element. A list of HTML elements that can be timed is available in the Applies To section of the time behavior reference.
Most traditional animation run times 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 (ANIMATION, AUDIO, IMG, MEDIA, and 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.
Use the following steps to add time to an HTML element.
You must associate the element with the time 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#time)" ...>
However, you might find it easier to associate an element with the time behavior by creating a cascading style sheets (CSS) class attribute, as shown in the following sample:
<HEAD>
<STYLE>
.time { behavior: url(#default#time);}
</STYLE>
</HEAD>
<BODY>
.
.
.
<P CLASS="time" ...>
.
.
.
</BODY>
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#time);}
</STYLE>
</HEAD>
<BODY>
<P>This text appears right away. More lines to follow...</P>
<P CLASS="time" t:BEGIN="2" t:DUR="5" >This appears after 2
seconds.</P>
<P CLASS="time" t:BEGIN="4" t:DUR="5">This appears after 4
seconds.</P>
<P CLASS="time" t:BEGIN="6" t:DUR="5">This appears after 6
seconds.</P>
<P>This is the last line.</P>;
</BODY>
</HTML>
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. 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#time);}
</STYLE>
</HEAD>
<BODY>
<H1 CLASS="time" t:BEGIN="0" t:DUR="11" t:TIMEACTION="style"
STYLE="Color:Red;">timeAction</H1>
<P>This text appears right away. More lines to follow...</P>
<P CLASS="time" t:BEGIN="2" t:DUR="5" t:TIMEACTION="display">This
appears after 2 seconds.</P>
<P CLASS="time" t:BEGIN="4" t:DUR="5" t:TIMEACTION="display">This
appears after 4 seconds.</P>
<P CLASS="time" t:BEGIN="6" t:DUR="5" t:TIMEACTION="display">This
appears after 6 seconds.</P>
<P>This is the last line.</P>
</BODY>
</HTML>
You can use HTML+TIME to specify timing for individual elements displayed on the page. You also can use it to create a timeline that groups elements together and specifies their timing relative to each element's predecessor in the sequence. 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 TIMELINE attribute to create a sequential time container.
<HTML>
<HEAD>
<STYLE>
.time { behavior: url(#default#time); }
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="time" t:TIMELINE="seq">
<DIV CLASS="time" t:DUR="2" t:TIMEACTION="display">
First line of text.
</DIV>
<DIV CLASS="time" t:DUR="2" t:TIMEACTION="display">
Second line of text.
</DIV>
<DIV CLASS="time" t:DUR="2" t:TIMEACTION="display">
Third line of text.
</DIV>
<DIV CLASS="time" t:TIMEACTION="display">
Fourth line of text.
</DIV>
</DIV>
</BODY>
</HTML>
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 TIMELINE 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#time); }
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="time" t:REPEAT="5" t:DUR="10" t:TIMELINE="par">
<DIV CLASS="time" t:BEGIN="0" t:DUR="4">First line of text.</DIV>
<DIV CLASS="time" t:BEGIN="2" t:DUR="4">Second line of text.</DIV>
<DIV CLASS="time" t:BEGIN="4" t:DUR="4">Third line of text.</DIV>
<DIV CLASS="time" t:BEGIN="6" t:DUR="4">Fourth line of text.</DIV>
</DIV>
</BODY>
</HTML>
Instead of using the TIMELINE attribute to group HTML elements on a timeline, you can use the PAR or SEQ elements. For example, in the previous sample that shows a sequence, you could have used the SEQ element instead of the DIV to yield the same results.
<t:SEQ CLASS="time">
<DIV CLASS="time" t:DUR="2">First line of text.</DIV>
<DIV CLASS="time" t:DUR="2">Second line of text.</DIV>
<DIV CLASS="time" t:DUR="2">Third line of text.</DIV>
<DIV CLASS="time">Fourth line of text.</DIV>
</t:SEQ>
When using any of the HTML+TIME elements, such as SEQ element, you must declare the XML namespace "t" in the HEAD of the document, as shown in the following lines of code:
<HEAD>
<XML:NAMESPACE PREFIX="t" />
</HEAD>
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.
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.
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.
The following topics provide related information about HTML+TIME and DHTML behaviors.
You can also view and download an HTML+TIME sample presentation containing multimedia elements synchronized with HTML+TIME.
Did you find this topic useful? Suggestions for other topics? Write us!
© 1999 Microsoft Corporation. All rights reserved. Terms of use.
Back to top