DirectShow Animated Header -- Using the ActiveMovie Control in HTML Pages DirectShow Animated Header -- Using the ActiveMovie Control in HTML Pages* Microsoft DirectShow SDK
*Index  *Topic Contents
*Previous Topic: About the DirectShow ActiveMovie Control
*Next Topic: Using the ActiveMovie Control in Visual Basic

Using the ActiveMovie Control in HTML Pages


Files on a Web page are referenced using URL names and various protocols, such as HTTP, file, FTP, or Gopher. These names can be either explicit or relative.

Following are two examples of explicit references. The first example uses the HTTP protocol to access the file. The second uses a network path and file name.

"http://directshow/samples/web/RoadRun.avi"

"file://directshow/samples/web/RoadRun.avi"

Here is an example of a relative reference:

"/samples/web/RoadRun.avi"

In the examples in this article, you can assume that either relative or explicit file names will work and any protocol for accessing these file names will also work.

Contents of this article:

Invoking Playback on HTML Pages

You can play files in one of two ways: either embedded in a Web page, or externally in a window displayed outside or on top of the page. There are four ways of playing back media using HTML tags. Three of these result in embedded playback:

The fourth means of implementing playback results in an external window:

Although not restricted to playback, you can use an attribute of the OBJECT tag to automatically download a file that contains required components for playback.

The following examples show how you use these tags to reference the file, but do not show all possible properties and attributes (width, height, color, and so on) that could be specified as well. See Setting ActiveMovie Control Properties on a Web Page for more information.

Using the OBJECT Tag

When you use the OBJECT tag, you must explicitly specify the class identifier (CLSID) for the playback control, as shown in the following example.

<OBJECT CLASSID="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">
<PARAM NAME="FileName" VALUE="//directshow/samples/web/RoadRun.avi">
</OBJECT>

The preceding CLSID is that of the ActiveMovie Control. The application loads the control and passes it the file name. The control parses the file name and downloads and plays the file. If the protocol is "file," the control instantiates the File Source (async) filter to play back the file. If the protocol is "http," the control instantiates the File Source (URL) filter instead. See the DirectShow SDK documentation for more information on these filters.

Using this tag, you can play back certain media types using "progressive downloading," which allows the user to play back the downloaded portion of the file as the data is downloading. See How Progressive Downloading Works for more information.

Using this tag along with the CODEBASE attribute, you can download components required for playback. See Using the OBJECT Tag with the CODEBASE Attribute for more information.

Using the OBJECT Tag with the CODEBASE Attribute

As the author of a Web page, you might find that using components such as specialized DirectShow filters can enhance playback of your media files on the user's machine. However, if the necessary components aren't already installed on the user's computer, you need a method to install those components. Internet Explorer supports using the CODEBASE attribute of the OBJECT tag for automatic file download, and cabinet (.cab) files for automatic installation. See http://www.microsoft.com/workshop/prog/cab/default.htm for information about the Cabinet SDK and .cab files.

The CODEBASE attribute works in conjunction with the OBJECT tag. See Using the OBJECT Tag for another example that uses the OBJECT tag.

An example of filter download using the CODEBASE attribute and a .cab file follows:


<OBJECT ID=GargleFilter1
CLASSID="CLSID:d616f350-d622-11ce-aac5-0020af0b99a3"
CODEBASE="http://directshow/samples/gargle.cab">
</OBJECT>

The preceding class identifier (CLSID) is the ID of the Gargle filter, which applies a "gargle" sound effect to a sound file. Internet Explorer checks the target computer's registry for the specified CLSID. If the specified CLSID is not present (indicating the filter is not installed on the machine), the browser attempts to find the file (Gargle.cab) at the site specified by the CODEBASE attribute and download it. Once downloaded, the .cab file provides the information to automatically install the filter.

Note: The .cab file must have been properly constructed for automatic installation to work. The .cab must include the filter (Gargle.ax in this case) and an .inf file that contains installation information. The .inf file should handle copying each filter to a specific directory (such as the Windows® System directory) on the user's computer and properly registering each filter. See the Platform SDK for information about .inf files.

Using the EMBED Tag

Netscape introduced this tag for embedding source. The following example uses this tag.

<EMBED autostart="FALSE" loop="FALSE" SRC="http://directshow/samples/web/RoadRun.avi">

This tag works identically to the OBJECT tag, except that you don't need to specify the CLSID. Internally, DirectShow examines the HKCR/MIME/Database/Content Type registry entries, retrieves the appropriate CLSID (DirectShow automatically registers all compatible data types at install time), and launches the control with that media type.

Using the IMG tag with the DYNSRC= Attribute

Internet Explorer can use the DYNSRC= attribute to play back audio-video interleaved (AVI) files. You can use this playback mechanism, but it is preferable to use the OBJECT tag. The following example demonstrates this HTML tag.

<IMG start=1 loop=0 DYNSRC="http://directshow/samples/web/RoadRun.avi">

Using the A Tag with the HREF Attribute

To play back a movie in an external movie, use the A tag with the HREF attribute. An example of this follows:

<A HREF="http://directshow/samples/web/dwad.cinepack.avi">AVI_CINEPACK</A>

The parsing steps that Internet Explorer 3.0 (or later) goes through are similar to the "EMBED SRC tag" case, in that it gets the file extension, maps it to a content type and looks in the HKCR/MIME/Database/Content Type area of the registry to get a CLSID to invoke. However, in this case the control plays in an external window. The ActiveMovie Control is in control of downloading the file.

How Progressive Downloading Works

The following series of steps describes what happens during progressive downloading.

  1. As soon as possible after activation, the ActiveMovie Control displays the first frame in the file (for movies). The filter graph remains in a paused state.
  2. The control does not start to play until it determines that it has enough data to play uninterrupted while the remaining amount downloads. At this time, playback starts and downloading will continue.
  3. The user can click the Play button during this time. In this case, the control will play until the play cursor reaches the end of the current amount downloaded and will automatically transition from the running state to the paused state.
  4. The download of the file will not stop if the user clicks Stop. The user can stop the download by closing the control.
  5. For most AVI or QuickTime files, you can't start playback until DirectShow has read the entire file (because the indexes are at the end of the file). However, the download bar is displayed to show how much of the file has been downloaded. The Play control button remains unavailable until the control downloads the file completely.

Setting ActiveMovie Control Properties on a Web Page

You can set any ActiveMovie Control property by using the PARAM tag inside an OBJECT container. For Boolean values, –1 is TRUE and 0 is FALSE. All other values are set as they would be in the Microsoft® Visual Basic® design environment.

The following example demonstrates playing a movie with most controls shown. If you have a video file and you want to try this, you can copy and paste this code onto your Web page and modify the parameters as you want. If you do this, be sure to change the movie's file name, perhaps using a relative path and file protocol (for example, PARAM NAME="FileName" VALUE="file://c:\mymovie.mpg") to play the movie from your hard drive.


<HTML>
<HEAD>
<TITLE>ActiveMovie Embedded MPG Object Test Page</TITLE>
</HEAD>
<BODY>
Scene from Stargate (MPG File)

<OBJECT ID="ActiveMovie1" WIDTH=357 HEIGHT=322
CLASSID="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">
<PARAM NAME="Version" VALUE="1">
<PARAM NAME="EnableContextMenu" VALUE="-1">
<PARAM NAME="ShowDisplay" VALUE="-1">
<PARAM NAME="ShowControls" VALUE="-1">
<PARAM NAME="ShowPositionControls" VALUE="0">
<PARAM NAME="ShowSelectionControls" VALUE="0">
<PARAM NAME="EnablePositionControls" VALUE="-1">
<PARAM NAME="EnableSelectionControls" VALUE="-1">
<PARAM NAME="ShowTracker" VALUE="-1">
<PARAM NAME="EnableTracker" VALUE="-1">
<PARAM NAME="AllowHideDisplay" VALUE="-1">
<PARAM NAME="AllowHideControls" VALUE="-1">
<PARAM NAME="MovieWindowSize" VALUE="0">
<PARAM NAME="FullScreenMode" VALUE="0">
<PARAM NAME="MovieWindowWidth" VALUE="353">
<PARAM NAME="MovieWindowHeight" VALUE="318">
<PARAM NAME="AutoStart" VALUE="0">
<PARAM NAME="AutoRewind" VALUE="-1">
<PARAM NAME="PlayCount" VALUE="1">
<PARAM NAME="SelectionStart" VALUE="0">
<PARAM NAME="SelectionEnd" VALUE="48.5151388">
<PARAM NAME="Appearance" VALUE="1">
<PARAM NAME="BorderStyle" VALUE="1">
<PARAM NAME="FileName" VALUE="http://DirectShow/samples/web/stargate1.mpg">
<PARAM NAME="DisplayMode" VALUE="0">
<PARAM NAME="AllowChangeDisplayMode" VALUE="-1">
<PARAM NAME="DisplayForeColor" VALUE="16777215">
<PARAM NAME="DisplayBackColor" VALUE="0">
</OBJECT>
</BODY>

© 1998 Microsoft Corporation. All rights reserved. Terms of Use.

*Top of Page