|
Nancy Winnick Cluts
TIME Extensions for HTML Proposed to the W3C
Posted September 30, 1998
 Download Microsoft Word (.DOC) format of this document (zipped, 5.81K)
Another proposed standard is on the horizon -- one that adds timing, interactivity, and streaming multimedia capabilities to HTML. This new proposal is known as HTML+TIME (Timed Interactive Multimedia Extensions). HTML+TIME defines a syntax for timing and synchronization within HTML documents, allowing developers to integrate streaming media directly into HTML and to synchronize timed HTML elements, all without requiring the user to use external multimedia players. This proposal was a collaborative effort, and was submitted to the World Wide Web Consortium (W3C) by Compaq Computer Corporation, Macromedia Inc., and Microsoft Corporation.
Support for Standards
HTML+TIME lets you weave streaming media directly into your HTML pages. It leverages current standards by supporting HTML 4.0 for display of elements on the page, Cascading Style Sheets (CSS) 2.0 for style reuse and positioning of elements on the page, and Extensible Markup Language (XML) 1.0 for structured data. In addition, the proposal supports namespaces for XML tags, HTML attributes qualification, and ECMAScript. This means that you don't have learn some new method to display elments in order to take advantage of the timing and synchronization capabilities of HTML+TIME. Instead, you mark up your existing HTML with inline timing information. This allows you to keep all of the information (for example, layout, timing, positioning, and so on) for an element together in your script.
Web Integration
HTML+TIME was designed to give the Web developer an easy method of integrating streaming media and timing into HTML. With the proposal, all HTML elements can interact with each other.
That is, a streaming video could interact with a timed HTML element elsewhere on the page. For example, let's say that you have created a tutorial in streaming video form, and you have also created a presentation with bullet points on a Web page. With HTML+TIME, you can synchronize the video with the bulleted list (i.e., make the item in the bulleted list highlight when the video is describing the item). This means the multimedia presentation is no longer confined to a particular region of the page (just a streaming video running in a box); instead, it can fully interact, via the HTML Document Object Model (DOM), with items on the whole page, making the presentation far more interesting and compelling to the person interacting with it.
The W3C currently supports the Synchronized Multimedia Integration Language (SMIL) 1.0 Specification as a Recommendation for multimedia presentations on the Internet. SMIL (pronounced "smile") is an XML-based format designed to deliver stand-alone multimedia presentations on the Internet. SMIL defines its own (non-HTML) layout language in addition to a language for synchronizing time-based media elements (streaming animation, audio, or video); a SMIL presentation is a self-contained multimedia presentation, and does not include any means for integration of multimedia presentations with the Web browser. As such, it cannot easily interact with other HTML elements on the Web page. The HTML+TIME proposal extends SMIL functionality to the Web browser.
Two Easy Examples
HTML+TIME provides the ability to synchronize media such as video or audio that is contained in an external media player to elements on HTML pages. This is done via simple declarative statements in your HTML; no complex loop script is required. To demonstrate just how easy the proposed syntax is, let's take a look at an example from the proposal. The example demonstrates how you can use HTML+TIME to display three different paragraphs, one per second, using the begin attribute.
<p t:begin="1"> This is a paragraph of text
that appears after one second
</p>
<p t:begin="2"> This is a paragraph of text
that appears after two seconds
</p>
<p t:begin="3"> This is a paragraph of text
that appears after three seconds
</p>
Note: The example from the proposal shown above is based on syntax that is still in the proposal stage. Syntax can change between the time a proposal is made to the time that the proposal (possibly) becomes a Recommendation by the W3C. In addition, be aware that not all proposals become Recommendations. This example, as well as the example shown later on in this article, is shown only to give you an idea of what is being proposed and how easy the proposed syntax is.
Being able to display items at absolute times is nice, but sometimes you may want to be able to display items in relative timing to other items. With HTML+TIME , you can display one item for a few seconds, then display the second item when the first item has disappeared. Think of it as HTML fireworks. Let's say you want to display some animation that repeats. Instead of using loops, you can use the repeat attribute defined in the HTML+TIME proposal to specify that you want an animation to repeat for two minutes.
Another example from the proposal demonstrates how you can use HTML+TIME to display a slide show. In the example below, the slide show sequences three images. If the user clicks on an image before the item times out, the next image is shown.
<div height=200 width=300>
<t:seq id="SLIDESHOW" t:beginEvent="none">
<!-- This begins when a trigger is sent.
This will sequence the three images.
If the user clicks on an image before the assigned duration,
it will advance to the next image.
-->
<img src="image1.gif" t:dur="5" t:timeAction="display"
onclick="this.endElement()">
<img src="image2.gif" t:dur="5" t:timeAction="display"
onclick="this.endElement()">
<!-- This uses endEvent syntax. Note that 'dur' will
override if there is no click by 5 seconds
-->
<img src="image3.gif" t:dur="5" t:timeAction="display"
t:endEvent="onclick">
</t:seq>
<img src="showOver.gif" t:beginAfter="SLIDESHOW"
t:timeAction="display">
<p align=center onclick="SLIDESHOW.beginElement()">
Click here to begin the slideshow.
</p>
<p align=center>
If it advances too slowly for you, just click on
an image to advance it interactively.
</p>
</div>
The script shown in this article gives you a good idea of how easily you can integrate streaming media into your Web site. Since HTML+TIME is based on standards that you are already familiar with, learning the new attributes is a snap. In fact, if this were already available, I could have just made the word "snap" actually snap when you clicked on the word or after a specific time interval.
© 1998 Microsoft Corporation. All rights reserved. Terms of use.
|
Ever since Site Builder Network developer-technology writer Nancy Cluts became a godmother recently, she's been making us offers we can't refuse.