HTML+TIME: a Roadmap

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), first released in Microsoft Internet Explorer 5, adds timing and media synchronization support to HTML pages. Using a few XML-based elements and attributes, you can add images, video, and sounds to an HTML page, and can synchronize them with HTML text elements over a specified time frame. 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 in the Synchronized Multimedia Integration Language (SMIL) 2.0 working draft. SMIL 2.0 is the World Wide Web Consortium (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.

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. Best of all, you can accomplish many of these things by merely adding some new attributes to existing HTML elements. Thus, you can use your existing HTML knowledge when you add timing to your page. If you are familiar with basic scripting, you can extend the flexibility and interactivity of time elements on your page even more. The following list contains several different samples of HTML+TIME in Web pages that require only simple HTML-like syntax.

• You can spice up a presentation using HTML+TIME transitions.

  Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/htmltime/transitions/intro_example.htm

• You can coordinate different media types including video, images, and sound. You can allow them to be initiated by user events such as clicking a button. In this sample, click the ad banner at the top of the sample page to see a presentation.

  Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/htmltime/largeSamples/AOE/aoe.html

Although declarative syntax is powerful, you can extend your control over HTML+TIME elements even more by accessing HTML+TIME elements through script. There are a number of unique HTML+TIME methods, properties, and objects available for scripting. The following is an example of how to dynamically change the animation path of a context menu using basic scripting.

Code example: http://samples.msdn.microsoft.com/Workshop/samples/author/behaviors/htmltime/DOM_Overview/contextMenu_ovw.htm

The following is an outline of the steps you might take to learn more about HTML+TIME in general or about a specific area of interest for using this technology.

This article contains the following topics.

• Where Do I Start? 
• The Basics 
• Specific Applications for HTML+TIME 
  • Animation 
  • Transitions 
  • Media 
  • DirectMusic 
• Reference 

Where Do I Start?

Learning about HTML+TIME can be divided into three areas:

1. The Basics

   Learn the basics of implementing this technology on your Web pages and about the rules that apply to all HTML+TIME applications.

2. Specific Applications for HTML+TIME

   Learn about a specific area of interest for using this technology. For example, one person might want to learn to create animations, while another might want to control video playback on their Web pages.

3. Reference Documentation

   Learn where all the reference documentation is and how you can use it to get the information you need as quickly as possible.

The remainder of this article serves as a roadmap to help you access the three avenues of inquiry into HTML+TIME.

The Basics

All the steps in this section can be applied to most uses of HTML+TIME. The following is a list of articles in recommended order of reading.

1. Introduction to HTML+TIME, Spice Up Your Web Pages with HTML+TIME, and Getting Started with HTML+TIME

   HTML+TIME is a behavior and certain steps must be taken to make it work in your Web pages; these articles explain those steps while introducing you to the basic syntax. The content of these three articles overlaps some, but after reading them you should have a good understanding of the basics of HTML+TIME.

2. Controlling Child Elements Using HTML+TIME: Time Containers

   Time containers simplify your control over HTML+TIME elements and are useful for most applications of this technology.

3. Initiating Timed Elements with the begin Attribute and Using the TIMEACTION Attribute

   These two short articles highlight two important attributes that are commonly used in HTML+TIME applications.

4. Using the HTML+TIME Document Object Model (DOM)

   All HTML+TIME elements are available to scripting--a feature that provides you with greater control and flexibility when creating HTML+TIME applications.

5. Seeking With HTML+TIME

   Seeking allows you to jump to any point on the timeline of HTML+TIME elements.

Specific Applications for HTML+TIME

There are a number of specific ways to use HTML+TIME:

Animation

Learn how to animate motion or color in your Web pages.

1. Basics of HTML+TIME Animation

   This article covers the basics of animation and provides you with an example.

2. Animating with keyTimes and keySplines

   You can gain greater control over your animation using the more advanced techniques introduced in this article.

3. HTML+TIME: Animation

   This reference is specific to programming components of animation.

Transitions

Visual transitions are great whenever you want an element to appear or disappear in a compelling way. The following is an example of some of the transitions available and the simplicity of the code used to generate it.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/htmltime/transitions/mastersample/master_sample.htm

Using HTML+TIME Transitions covers all the basics of transitions and how to use them. After reading this article, you can jump right into creating transitions using the following tutorials:

1. How to Create a Basic HTML+TIME Transition

   Create a basic visual transition.

2. How to Create An Animated Presentation Using HTML+TIME Transitions

   Create a compelling presentation.

3. How to Make An Animated Menu Using HTML+TIME Transitions

   With a little bit of scripting, you can create a context menu that transitions in and out of view in random ways.

4. How to Make a Slide Show Using HTML+TIME Transitions

   Also using scripting, you can create a slide show that transitions from one slide to the next.

Media

There are a number of ways to control the various audio and video media that play in your Web pages using HTML+TIME. You can embed playback of your media directly in your Web pages. Here are a few examples.

• Create your own embedded player.

  Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/htmltime/DOM_Overview/mediaProperty_ovw.htm

• Create your own embedded player with a playlist.

  Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/htmltime/DOM_Overview/playList/playList2.htm

For reference documentation specific to media, see HTML+TIME: Media.

DirectMusic

Microsoft DirectMusic is a component of Microsoft DirectX that provides a medium over which music and sound effects can be played. Music or sound effects composed for DirectMusic can be quite flexible and can change dynamically over time or in response to a user event. This sound playback can be stored in relatively small files, making it well-suited for Web applications. DirectMusic's software synthesizer assures that MIDI files and DirectMusic segments sound identical on all hardware configurations. HTML+TIME has many unique properties, methods, and events that enable you to control playback of DirectMusic in Web pages. For a quick overview of using DirectMusic with HTML+TIME see Using HTML+TIME with DirectMusic. For a specific reference for DirectMusic see HTML+TIME: DirectMusic.

For reference documentation specific to using DirectMusic with HTML+TIME see HTML+TIME: DirectMusic.

Reference

For documentation on all the elements, attributes/properties, methods, events, and collections for HTML+TIME see HTML+TIME 2.0 Reference. Most of the pages have samples that demonstrate the respective feature.