Spice Up Your Web Pages with HTML+TIME (HTML+TIME Technical Articles) (HTML+TIME Technical Articles)

Spice Up Your Web Pages with HTML+TIME

Debbie Newman
Microsoft Corporation
May 2000

Summary: This article provides an introduction to HTML+TIME in Microsoft Internet Explorer 5.5.

Disclaimer: The inline samples in this article will not function correctly unless you are running Internet Explorer 5.5. In addition, the inline samples may not be compatible with the FrontPage HTML Editor.

Download Internet Explorer 5.5 Download Internet Explorer 5.5

Contents

HTML+TIME Attributes
Declaring HTML+TIME Behaviors
Basic Timing ExamplesBegin and Dur Attributes
Interactivity
HTML+TIME Containers
Media
Switch Element and Text Attributes
SMIL 2.0

In this "Internet age" with the proliferation of Web pages for every imaginable topic, it is becoming increasingly important to draw users into a page and keep them engaged with the topic at hand. Creating interesting and interactive pages encourages the user to remain on the page as long as possible and gives the Web page author more of a chance to get the point across.

HTML+TIME provides a declarative means to add multimedia and interactivity to Web pages. As the content creator, you don't need to know script to use HTML+TIME, so you can focus on creating the content instead of learning a programming language.

The basic concept behind HTML+TIME is that you control when items come and go on a page. Those items can be images, text, movie clips, sound, HTML elements, or styles. You can tell an item to show up on the page at a certain time, such as 10 seconds after the page loads, or to show up at the same time as another item or at a time relative to another item, or to come and go in response to user interaction such as a button click. In addition to the item's begin time, you can provide a duration, end, or repeat count.

HTML+TIME Attributes

HTML+TIME provides attributes you can use to specify an element's timing behavior. This section briefly introduces the begin, dur, repeatCount, repeatDur, and end attributes.

The begin attribute specifies the time or times at which an element begins, relative to its parent's timeline. For example, begin="4" means that the element begins 4 seconds after its parent begins. The body begins when the page loads (at time 0). You can specify multiple begin times by separating them with semicolons. In addition to specific times, an element can also begin in response to an event like a button click or in relation to the beginning or end of another element. The special value "indefinite" means that the begin time is some time in the future and has yet to be resolved.

Example begin times:

  • begin="18" begin 18 seconds after parent.

  • begin="5;10;15;20" begin at 5, 10, 15, and 20 seconds after parent.

  • begin="theButton.click" begin when the element with the ID "theButton" is clicked.

  • begin="theDiv.begin" begin when the element with the ID "theDiv" begins.

  • begin="theSpan.end" begin when the element with the ID "theSpan" ends.

  • begin="0;theButton.click" begin at 0 and when the element with the ID "theButton" is clicked.

Note the parent's timeline can cut short the timeline of its child. For example, if the parent ends at time 20, then its child cannot begin after that time. The child ends if it is active when its parent ends.

The dur attribute specifies the length of the simple duration, which is the basic duration of the presentation of the element. The presentation might include making the element appear or disappear, or it might include applying a style to the element. The dur attribute must be a single value greater than 0. The special value "indefinite" indicates that the duration should last forever. However, the duration can still be cut short by an explicit end (using the end attribute) or the end of the parent.

Example dur values:

  • dur="5"

  • dur="indefinite"

The repeatCount attribute specifies the number of times the element should repeat its simple duration. Fractional values (such as 2.5) are allowed and indicate a partial repeat of the last iteration. In the case of 2.5, the element will repeat two and a half times. The special value "indefinite" indicates that the repeat should last forever, subject to the duration of the parent.

The repeatDur attribute is similar to repeatCount but specifies the amount of time (rather than the number of times) to repeat the simple duration. For example, if dur specifies a simple duration of 5 and repeatDur is 12.5, then the simple duration will repeat two and a half times (12.5/5=2.5). The special value "indefinite" indicates that the repeat duration should last forever, subject to the duration of the parent.

The simple duration combined with the effect of any repeats defines the active duration.

The end attribute specifies the end of the active duration. As with begin, you can specify multiple end values separated by semicolons. The special value "indefinite" means the end is sometime in the future and has yet to be resolved. An end time overrides the duration and can cut short or extend the duration if both are specified on the same element.

In contrast to dur, which specifies a duration relative to the element's begin time, end is an absolute time in relation to the element's parent's timeline. For example, if begin="3" and dur="5" and end, repeatCount, and repeatDur are not specified, then the element will end 5 seconds after it begins, which is 8 seconds on the parent's timeline. However, if end="5", then the element will end at 5 seconds on the parent's timeline.

HTML+TIME provides a number of additional attributes that provide additional control over items on the page, but the attributes above give you the foundation to begin using HTML+TIME.

Declaring HTML+TIME Behaviors

Microsoft Internet Explorer 5.5 provides support for HTML+TIME through a series of element behaviors. To enable HTML+TIME content on your page, you need to add some declarations for the element behaviors to the top of the page.

First, make sure the <html> element includes the namespace declaration for HTML+TIME, as follows:

<html xmlns:t ="urn:schemas-microsoft-com:time">

Second, within your style block, declare the HTML+TIME version 2.0 (TIME2) behavior.

<style>
.time { behavior: url(#default#TIME2); }
</style>

Third, immediately following your style block, add the declaration to import the TIME2 behavior as an element behavior.


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

Here is a skeleton HTML page that includes the required declarations for HTML+TIME in Internet Explorer 5.5. You can copy the example as a basis for your own HTML+TIME pages.


<html xmlns:t ="urn:schemas-microsoft-com:time" >
<head>
<style>
.time { behavior: url(#default#time2) }
</style>
<?IMPORT namespace="t" implementation="#default#time2">
</head>
<body>
<!-- Replace this line with your content -->
</body>
</html>

Basic Timing Examples Begin and Dur Attributes

Once you've added the necessary declarations to the top of the page, you can begin adding timing within the page. Add class="time" to an element to attach the time behavior to that element. You can then use the HTML+TIME attributes such as begin and dur to cause HTML elements to appear and disappear from the page in response to the times you specify. The dur attribute indicates the length of time (duration) that the timing will be applied.

The following example (Example 1) illustrates several aspects of timing.

<p id=example1 class="time" begin="0; example1.end+2" dur="1">HTML+TIME allows you
to control when HTML elements come and go.</p>

The time class attaches to the paragraph and handles the time-specific attributes begin and dur.

The example has two begin times: 0 and example1.end+2. The first begin time (0) displays the paragraph beginning when the page begins (at 0 seconds). The second begin time (example1.end+2) is more complex and consists of several parts. The ID of this paragraph is "example1", and "example1.end" indicates the simple end of this paragraph. The "+2" is an offset indicating 2 seconds after the simple end of the paragraph. Therefore, the second begin means to begin again 2 seconds after the paragraph has ended.

The paragraph first displays at 0 seconds for 1 second and then ends its simple duration. When its simple duration ends, the paragraph disappears and then begins again 2 seconds after its previous end (example1.end+2). It displays again for its duration, ends its simple duration, and begins again 2 seconds later, repeating the pattern forever (or until its parent ends), since the second begin time is triggered every time the paragraph ends.

Below is a live version of the example illustrated above.

Example 1. In this example, the sentence "HTML+TIME allows you to control when HTML elements come and go" below will appear to blink.

HTML+TIME allows you to control when HTML elements come and go.

For a more straightforward example, you could specify one begin time (for example, 10), and the paragraph would begin at that time and disappear after the specified duration. It would not begin again, since that one time had already occurred.

The following HTML fragment shows the syntax for a paragraph that begins at time 10, displays for 5 seconds, and does not begin again.

<p class="time" begin="10" dur="5">text</p>

Example 1 uses a repeating pattern instead of the simple example above to make sure you have a chance to watch it come and go.

You can also specify a list of begin times (for example, "10;17;30;95") to cause the paragraph to begin at those times, display for the duration, and disappear again until the next begin time. Once all of the begin times have been exhausted, the paragraph will not display again.

The following HTML fragment shows the syntax for a paragraph with the list of begin times specified above. The paragraph displays beginning at each of the begin times in turn, displays for the 6-second duration, and disappears until the next begin time when it again displays for 6 seconds and then disappears until the next begin time. After it has completed the list of begin times, it does not begin again.

<p class="time" begin="10;17;30;95" dur="6">text</p>

The same syntax applies to other HTML elements besides <p>, such as <div>, <span>, <img>, <h1>, <h2>, and so on. You can apply timing to multiple elements on the page and synchronize their display or time them independently. Example 2 displays text and an image together. The text begins and ends in a repeating pattern, similar to the begin and end in Example 1, beginning again 2 seconds after it ends. The image begins 1.5 seconds after the text begins (example2.begin+1.5) and ends when the text ends (example2.end).

Example 2. In this example, the text "Introducing Seattle at night" will appear first, followed by a photograph of Seattle.

Introducing Seattle at night...

The following HTML fragment shows the syntax used to achieve the timing in Example 2.


<h3 id=example2 class="time" begin="0; example2.end+2" dur="5">
Introducing Seattle at night...
</h3>
<img class="time" begin="example2.begin+1.5" end="example2.end" src="Seattle.jpg"
style="height=150; width=300" />
The image source, height, and width are the same attributes that apply to an <img> element that does not include timing. The end attribute (end="example2.end") indicates an absolute end time for the image, in contrast to the dur used on the heading element (<h3>) in this example. The end attribute causes the image to end when the heading (<h3>) ends. The dur attribute is added to the begin time of the <h3> to determine when the heading ends, since an end time is not specified on the heading. Web pages probably use dur more often than end and do not typically use both dur and end at the same time. We will leave the discussion of the finer distinctions between the two for a later time.

You can time any number of elements on a page, making the page progressively more active.

Interactivity

You can add user interaction to your Web pages by allowing elements to begin or end in response to events, as in the following example.

Example 3. In this example, clicking the paragraph below will cause the photograph to appear.

Click this paragraph to display an image. The begin time for the image is startExample.click; startExample is the ID of this paragraph. The image appears when this paragraph is clicked and ends after the specified duration. Click this paragraph again to restart. The HTML fragment to accomplish this behavior follows:

<img class="time" begin="startExample.click" dur="5" src="Seattle.jpg"
style="height=150; width=300/>

HTML+TIME Containers

A time container is an element that enforces time relationships between its child elements. HTML+TIME provides three time containers that provide assistance in common scenarios:

  • <t:par> timed children run in parallel.

  • <t:seq> timed children run in sequence, one after another; only one child can be active at a time.

  • <t:excl> timed children run exclusively, in any order; the exclusive time container automatically stops all other children when one child is activated; as in a sequence, only one child can be active at a time.

The "t:" prefix on all the time containers matches the "t" namespace qualifier declared at the top of Web pages that use HTML+TIME.

<t:par> Time Container

The previous examples in this article are children of a <t:par> because they are children of the <body> element, and the body is implicitly a <t:par> time container.

The following example uses a parallel time container to wrap a timed paragraph and have it repeat forever, subject to the active time of the time container's parent. The paragraph uses class="time" and the begin and dur attributes, much like the examples already discussed in this article. The paragraph begins at 1 second, displays for 3 seconds, and then repeats because of the repeatCount on the <t:par>, beginning again 1 second later. The pattern repeats until the time container's parent ends.

<t:par repeatCount="indefinite">
<p class="time" begin="1" dur="3">Paragraph uses repeatCount to come and go.</p>
</t:par>

Example 4. In the example below, the sentence "Paragraph uses repeatCount to come and go" begins at 1 second and displays for 3 seconds. At that point the child ends and the parent repeats, beginning the child again 1 second later.

Paragraph uses repeatCount to come and go.

<t:seq> Time Container

Sequence time containers are designed to provide slideshow functionality. The following example uses the <t:seq> combined with <t:par> to provide a slideshow of several images. Each <t:par> groups an image together with a div that contains a corresponding caption. The sequence displays the image/caption pairs one after another to form the slideshow. The indefinite repeatCount causes the sequence to continue cycling through the slideshow.

This example also sets the timeAction attribute to "display" to prevent the page from reserving space in the layout for each image and caption. That means all the images and captions appear in the same location on the page, as is typical with a slideshow. 

<t:seq repeatCount="indefinite">
<t:par>
<img class="time" begin="0" dur="3" timeAction="display" src="Seattle.jpg"
style="height=150; width=300" />
<div class="time" begin="0" dur="3" timeAction="display">Seattle</div>
</t:par>
<t:par>
<img class="time" dur="3" timeAction="display" src="OlympicMtns.jpg"
style="height=150; width=300" />
<div class="time" dur="3" timeAction="display">Olympic Mountains</div>
</t:par>
<t:par>
<img class="time" dur="3" timeAction="display" src="ferry.jpg"
style="height=150; width=300" />
<div class="time" dur="3" timeAction="display">Seattle Ferry</div>
</t:par>
<t:par>
<img class="time" dur="3" timeAction="display" src="ggbridge.jpg"
style="height=150; width=300" />
<div class="time" dur="3" timeAction="display">Golden Gate Bridge</div>
</t:par>
</t:seq>

Example 5. In the example below, a slideshow of four photographs will appear. When the final element in the sequence ends, the sequence repeats from the beginning. The sequence continues forever due to the "indefinite" repeatCount.

Seattle
Olympic Mountains
Seattle Ferry
Golden Gate Bridge

<t:excl> Time Container

The example below displays one of four images, depending on the button that is clicked. The <t:excl> time container takes care of turning off all of the other images when you select an image. Once again, timeAction="display" ensures that all of the images display in the same location. 


<button id=seattle>Seattle</button>
<button id=ferry>Seattle Ferry</button>
<button id=olympics>Olympic Mountains</button>
<button id=bridge>Golden Gate Bridge</button>
<t:excl dur="indefinite">
<img class="time" begin="0;seattle.click" dur="indefinite" timeAction="display"
src="Seattle.jpg" style="height=150; width=300" />
<img class="time" begin="ferry.click" dur="indefinite" timeAction="display" src="ferry.jpg"
style="height=150; width=300" />
<img class="time" begin="olympics.click" dur="indefinite" timeAction="display"
src="OlympicMtns.jpg" style="height=150; width=300" />
<img class="time" begin="bridge.click" dur="indefinite" timeAction="display" src="ggbridge.jpg"
style="height=150; width=300" />
</t:excl>

Example 6. This example displays four buttons; when each button is clicked, a different image is displayed.

Media

HTML+TIME provides the following elements for playback of media, such as audio, video clips, and images:

  • <t:media>

  • <t:video>

  • <t:audio>

  • <t:img>

  • <t:animation>

  • <t:ref>

These elements are synonyms of one another, and their function is identical. The variety of media elements allows the author to provide self-documenting content. For example, you could use the <t:audio> element when playing a sound clip and the <t:video> element when playing a video clip. You could use the <t:animation> element for animated gifs and the <t:img> element for still images, similar to the traditional HTML <img> element. <t:media> is a generic element that could refer to all media, as is the <t:ref> element, because it stands for a reference to another file.

The media elements support the begin, dur, end, repeatCount, repeatDur, and timeAction attributes already discussed in this article, as well as attributes not yet covered. A few attributes specific to the media elements include the following:

  • src source media file to play, like the source used with <img>

  • clipBegin position in which to begin playback in a media clip

  • clipend position in which to end playback in a media clip

  • player player to use to play back the media. HTML+TIME includes a default player so you don't have to specify a player in most cases. You can specify the CLSID of a player or use the special values "dmusic" for DirectMusic playback or "dvd" for DVD playback.

<button id=startMedia>Play</button>
<button id=stopMedia>Stop</button>
<t:media begin="startMedia.click" end="stopMedia.click" src="clock.avi" mute="true"
timeAction="display" style="height=150; width=150" />

Example 7. The following example plays a video clip when you click the Play button and stops when you click the Stop button. The example also mutes the audio from the clip.


<button id=startMedia2>Play using clipBegin</button>
<button id=stopMedia2>Stop</button>
<t:media begin="startMedia2.click" end="stopMedia2.click" clipBegin="6" src="clock.avi"
mute="true" timeAction="display" style="height=150; width=150" />
Example 8. The following example uses clipBegin to begin playback 6 seconds into the movie. To see the effect, compare playback of this clip with playback to the same clip above that does not use clipBegin. Playback begins when you click the Play using clipBegin button and ends when you click the Stop button.

Switch Element and Test Attributes

Internet Explorer 5.5 introduces support for the <t:switch> element and the systemCaptions, systemBitrate, systemOverdubOrSubtitle, and systemLanguage test attributes. The <t:switch> element allows you to list several alternate choices and display content, depending on which choice is true on the user's machine.

Example 9. HTML+TIME Accessibility Switch on Captions. This example detects whether your system captions are on or off. Only the correct match (on or off) should be displayed. Check ShowSounds on the Sound tab in the Control Panel Accessibility applet to change your system settings to use captions. Refresh this page to see the result of the new setting.

The source for the example follows:

<t:switch id=switchID>
<p id=choice1 systemCaptions="on">on</p>
<p id=choice2 systemCaptions="off">off</p>
</t:switch>

Your caption settings are:

on

off
Example 10. HTML+TIME Language Switch on System Language Setting. This example detects the system language setting in the Regional Options in the Control Panel and displays a text fragment in Spanish, Portuguese, or English, depending on the system language setting.

The source for the example follows:

<t:switch>
<span class="time" systemLanguage="es" >Somos interdependientes (Espanol)</span>
<span class="time" systemLanguage="pt" >Ns somos interdependentes (Portuguese)</span>
<span class="time" systemLanguage="en" >We are interdependent (English)</span>
<span class="time">None of the above</span>
</t:switch>

Your language settings are:

Somos interdependientes (Espanol) Ns somos interdependentes (Portuguese) We are interdependent (English) None of the above

SMIL 2.0

HTML+TIME is the Microsoft implementation of the HTML+SMIL profile in SMIL 2.0. SMIL 2.0 is the next version of the Synchronized Multimedia Integration Language (SMIL) specification that many companies, including Microsoft, are working to define together at the Worldwide Web Consortium (W3C). The latest public working draft is available on the W3C site at http://www.w3.org/TR/smil20/ Non-MS link.

The HTML+SMIL Language profile defined by the latest SMIL 2.0 working draft specifies that HTML is used for layout in the HTML+SMIL profile rather than using the separate SMIL Language for layout.

Internet Explorer 5.5 includes support for the SMIL Timing and Synchronization module, SMIL 2.0 Animation module, SMIL Media Object module, and SMIL Integration module.

Summary

Internet Explorer 5.5 opens the world of rich, interactive, synchronized, accessible multimedia to the content developer. Many exciting new features abound, and we've only scratched the surface so far.

Additional Information

For more information, check out HTML+TIME.