Mark McCulley
Developer Technology Engineer, Microsoft Corporation
September 27, 1996
Click to open or copy the files in the ActiveMovie OCX Help file.
The Web is rapidly evolving from a text-based environment to one rich in images, sounds, and video. First-generation browsers used external programs to render multimedia content based on the file type of the media. Newer browsers still use external programs, but these programs are much more integrated with the host browsers. This provides more features and more control for Web designers and developers.
The Microsoft® ActiveMovie™ control is a playback engine for the most popular media types, including MPEG audio and video, AVI video, WAV audio, and Apple® QuickTime® video. It's also an ActiveX™ control and presents a rich interface for scripting languages such as Visual Basic® Scripting Edition (VBScript) and JavaScript™.
This article is the first installment of a two-part series. Part I discusses the HTML tags you can use with the ActiveMovie control. Part II is devoted to scripting the control with VBScript and JavaScript. For those of you just starting out as Web developers, I've also chronicled the various tools and information sources I used in writing this article. To get the most from this article, you should know a bit about HyperText Markup Language (HTML). You don't have to be a card-carrying HTML programmer or anything, but you should (like me) know at least enough to be dangerous.
The ActiveMovie control is an ActiveX control for Windows® 95 and Windows NT®. What is an ActiveX control? It's a reusable software component that adds specialized functionality to Web pages as well as to applications created with programming languages such as Visual C++® and Visual Basic. If you're not satisfied with this brief explanation, check out the article "Frequently Asked Questions About Developing Web Pages Using ActiveX Controls" for a more in-depth explanation. The ActiveMovie control plays the following types of media:
Note The current release of ActiveMovie does not support playback of QuickTime VR or MIDI files, or files compressed with proprietary Apple codecs such as the RPZA codec.
The best way to get acquainted with the ActiveMovie control is to jump right in and start experimenting. After reading this article, try cutting and pasting some of the example HTML code into your Web pages. Although most of the examples refer to MPEG movie files, you can just as easily play any of the media types listed above. Don't worry—you can't break anything!
This section should provide you with pointers to everything you need to begin creating Web pages that use the ActiveMovie control. (I was going to title this section "Getting Started," but that sounds too much like one of those software manuals that you throw away as soon as you open the box.)
The first thing you'll need is a browser. Microsoft Internet Explorer is the browser of choice to use with ActiveX controls. You can get the latest version of Internet Explorer from the Internet Explorer download.
You'll also need the ActiveMovie control. If you did a full installation of Internet Explorer 3.0, you already have this control; otherwise, you can download it from the same Internet Explorer download area. If you're not sure what type of installation you performed for Internet Explorer, search your hard disk for a file named AMOVIE.OCX. It should be located in your Windows system directory (typically, \WINDOWS\SYSTEM). If you have the AMOVIE.OCX file in your system directory, you have the ActiveMovie control.
The final tool you'll need is a text editor. Notepad will do just fine, but I suggest getting the Microsoft ActiveX Control Pad. This nifty tool is not only an HTML editor, but it also hosts ActiveX controls and provides an easy-to-use interface for setting control properties. If you plan on doing any ActiveX control scripting, this is a must-have tool! The ActiveX Control Pad is free for the asking (or clicking) on the ActiveX Control Pad on the Microsoft Site Builder Workshop Web site.
By the way, the Site Builder Workshop Web site is a fabulous resource for anyone working with Web pages or ActiveX controls. It's chock full of tools, specifications, samples, and lots of other resources. Did I say it's all free for the asking?
To include audio and video in your Web pages, there are four HTML tags that you can use:
The <OBJECT> and <EMBED> tags are used to specify that the ActiveMovie control be used to play the media; with the <IMG> and <A> tags, the browser chooses a plug-in, control, or helper application to play the media. Before I go into the details of using each of these tags, I want to say something about standards.
I have a little confession to make. When I began this article, I knew very little about HTML tags. Oh sure, I knew conceptually what HTML was all about, but I hadn't really sat down and hacked out a Web page. I knew that there were standards committees and specifications for HTML 1.0 and HTML 2.0, as well as a vast quantity of existing HTML content. So I naïvely figured I could get the proper specification and easily determine the proper tags to use with video and audio media. Not!
There are HTML standards, but standards have become one of the casualties of the Browser War between Microsoft and Netscape. Although there is a core set of tags supported by both Internet Explorer 3.0 and Netscape Navigator 3.0, each browser has its own set of extensions to HTML. Unless you're creating Web pages for an intranet where you know everyone is using the same browser, this difference in HTML support presents a dilemma. I'll provide some techniques for creating Web pages that work in both browsers.
The <OBJECT> tag inserts objects such as ActiveX controls and documents, Java applets, and other media plug-ins into HTML documents. This tag was created by the World Wide Web Consortium (W3C), an international consortium of institutions and corporations such as Microsoft, Netscape, and Sun Microsystems. The purpose of the W3C is to promote standards for interoperability between Web products by producing specifications and reference software. For more information about the World Wide Web Consortium, check out the W3C Web site at http://www.w3.org/pub/WWW/.
The <OBJECT> tag allows you to specify a media file and a software component, as well as properties and parameters for displaying the media. It also allows you to specify an alternative for browsers that don't support a particular type of media. I'm not going to explain every nuance of using the <OBJECT> tag (it currently has almost 20 different attributes), but I will give you all of the basic information you need to use this tag to include the ActiveMovie control in your Web pages.
The easiest way to include any ActiveX control in an HTML document is to use the ActiveX Control Pad. Here's how to insert the ActiveMovie control in an HTML document:
The ActiveX Control Pad will generate the following HTML code in your document:
<OBJECT ID="ActiveMovie1" WIDTH=267 HEIGHT=73
CLASSID="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">
<PARAM NAME="_ExtentX" VALUE="7038">
<PARAM NAME="_ExtentY" VALUE="1931">
</OBJECT>
The next step is to associate a movie or audio file with the control by setting the FileName parameter. The following line of HTML code sets the value of the FileName parameter to an MPEG file named CYBERVIS.MPG:
<PARAM NAME="FileName" VALUE="cybervis.mpg">
If the media file referenced by the FileName parameter is not in the same directory as the HTML file, you can specify a relative path. You can also reference files located anywhere on the Internet by specifying a Uniform Resource Locator (URL) for the FileName parameter. The following are examples of the three different ways to specify media files with the FileName parameter:
<PARAM NAME="FileName" VALUE="cybervis.mpg">
<PARAM NAME="FileName" VALUE="../movies/cybervis.mpg">
<PARAM NAME="FileName" VALUE="http://www.hollywood.com/movies/cybervis.mpg">
The first example references a file residing in the same directory as the HTML file. The second example references a file in a directory named MOVIES that is at the same level as the directory containing the HTML file. The third example uses a URL to specify a file residing on the Internet.
In addition to the FileName parameter, you also need to specify the size of the movie window with the MovieWindowWidth and MovieWindowHeight parameters. The easiest way to do this is by clicking on the icon that appears to the left of the <OBJECT> tag in the Control Pad. This will open the Properties dialog box. The Control Pad will calculate the proper size for the window for the movie you've specified and generate HTML code to set the MovieWindowWidth and MovieWindowHeight parameters. Here's the complete HTML for the <OBJECT> tag, with all the required parameters:
<OBJECT ID="ActiveMovie1" WIDTH=356 HEIGHT=328
CLASSID="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">
<PARAM NAME="_ExtentX" VALUE="9419">
<PARAM NAME="_ExtentY" VALUE="8678">
<PARAM NAME="MovieWindowWidth" VALUE="352">
<PARAM NAME="MovieWindowHeight" VALUE="247">
<PARAM NAME="FileName" VALUE="cybervis.mpg">
</OBJECT>
Figure 1 illustrates the appearance of this HTML code in a Web page:
Figure 1. ActiveMovie control embedded in Web page using <OBJECT> tag
Tip It's easy to test as you write HTML code if the page you're working on is loaded in your browser. After you make a change to your HTML document, save it, switch to the browser, and refresh the page. With the ActiveX Control Pad and Internet Explorer open, you can do this operation with a few keystrokes. Press CTRL+S to save the file in the ActiveX Control Pad, press ALT+TAB to switch to Internet Explorer, and then press F5 to refresh the page in Internet Explorer.
I'm not talking about the meaning of life here—I'll be covering that in my next article. I'm divulging the meaning of the HTML source for the <OBJECT> tag. Some of this stuff looks pretty arcane. For example, consider the following fragment of code that was generated by the ActiveX Control Pad when inserting the ActiveMovie control:
ID="ActiveMovie1"
CLASSID="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A"
<PARAM NAME="_ExtentX" VALUE="9419">
<PARAM NAME="_ExtentY" VALUE="8678">
The first line, the one that specifies the ID attribute, defines a document-wide identifier. This identifier can be used by other objects in the document to communicate with the ActiveMovie control. You can also use this identifier to specify a position within an HTML document as the destination of a hypertext link.
The second line, the one that specifies the CLASSID parameter, identifies the implementation of the object. In this case, it specifies that the object referred to by the <OBJECT> tag is the ActiveMovie control. That long string of digits and letters is a 128-bit value known as a globally unique identifier (GUID). Where did this 128-bit value come from? There is a special software tool (GUIDGEN.EXE) that uses a carefully developed algorithm to create GUIDs.
What are the odds of two developers creating the same GUID?: According to the documentation "about the same as two random atoms in the universe colliding to form a small California avocado mated to a New York City sewer rat." So don't worry.
The last two lines contain parameters named _ExtentX and _ExtentY. I searched high and low, but can't find any information about these two parameters.
One of the attributes of the <OBJECT> tag is the CODEBASE attribute. This attribute can be used to identify locations on the Web where objects can be found and automatically downloaded by a browser. You don't need to use the CODEBASE attribute with the ActiveMovie control (or with many other Microsoft-supplied controls) because Internet Explorer will use the ActiveX Object Index automatically to find the control based on its class identifier (CLSID). For more information on automatic downloading of ActiveX controls, see the ActiveX Control FAQ mentioned earlier in this article.
The <EMBED> tag was created by Netscape to support browser plug-ins. The difference between a plug-in and a helper application is in the level of integration with the browser. Helper applications are external to the browser, while plug-ins appear to the user as seamless extensions of the browser. A manifestation of this difference: Plug-ins are capable of rendering content directly within the browser window, while helper applications require a separate window to display content.
While both Internet Explorer and Navigator support the <EMBED> tag, the level of support varies between the two browsers. The following line of HTML code will embed an MPEG file in a Web page and will display it properly in both browsers:
<EMBED SRC="cybervis.mpg" WIDTH=352 HEIGHT=260>
This code doesn't embed a control, it embeds a document (the MPEG file). The browser chooses which control (in the case of Internet Explorer) or plug-in (in the case of Navigator) to use to display the document. Internet Explorer will use the ActiveMovie control to display most types of audio and video media. Figure 2 illustrates the appearance of the ActiveMovie control in Internet Explorer using the <EMBED> tag:
Figure 2. ActiveMovie control embedded in Web page using <EMBED> tag
Compare this image to the previous image showing the appearance of a page using the <OBJECT> tag. There is no time display appearing on the page that uses the <EMBED> tag. The <EMBED> tag does not provide access to any control parameters.
Note Both Internet Explorer and Navigator require that you specify the size of the document you are embedding with the <EMBED> tag. However, each browser interprets this size information differently. For example, in Internet Explorer, the movie window is scaled if it doesn't match the specified size. In Navigator, the movie window is clipped.
The following table lists additional parameters you can use with the <EMBED> tag:
| Parameter | Description |
| CONTROLLER=TRUE(FALSE) | Specifies whether control buttons are shown or not. The default is TRUE. |
| LOOP=TRUE(FALSE) | Specifies whether playback will loop continuously. The default is FALSE. |
| AUTOPLAY=TRUE(FALSE) | Specifies whether playback will begin automatically when the page is loaded. The default is FALSE. |
The <A> tag is the cornerstone of the World Wide Web. It's the tag used to create all types of links—links to locations within the same document, other documents, locations within other documents, and media resources such as images and sounds. While you can't explicitly code the <A> tag to use a specific control such as the ActiveMovie control, the <A> tag is supported by all Web browsers. If you want your readers to determine how the video is displayed and it doesn't matter that the video is rendered in a separate window, you may want to consider using the <A> tag. The following is a list of characteristics associated with using the <A> tag to include media resources in Web pages:
Let's take a look at the code. The following HTML code uses the <A> tag to link to an MPEG movie file named CYBERVIS.MPG:
Click <A HREF="cybervis.mpg">here</A> to play movie.
Figure 3 illustrates the ActiveMovie control that comes up in a separate window when the link is selected:
Figure 3. ActiveMovie control in a separate window
The <A> tag works equally well with both Internet Explorer and Navigator. However, if you want more control over how the video is displayed by the browser or if you want the video to be embedded in the Web page, you should use the <OBJECT> tag.
Although the <IMG> tag can be used to include video clips in a Web page, the ActiveMovie control is only indirectly involved in playing MPEG and QuickTime movies, and not at all involved in playing AVI files. It's difficult (if not impossible) to use the <IMG> tag with video media in a way that works well in both Internet Explorer and Navigator. In addition, the <IMG> tag does not work at all with audio media. For these reasons, I think the <OBJECT> and <EMBED> tags are much better choices for including audio and video on Web pages.
In the interest of being as complete as possible, I'll give you a brief rundown on using the <IMG> tag with video media. The following line of HTML code uses the <IMG> tag with the DYNSRC attribute to include an MPEG movie on a Web page:
<IMG DYNSRC="cybervis.mpg">
Navigator does not recognize the DYNSRC attribute, so you have to use the following code for that browser:
<IMG SRC="cybervis.mpg">
Unless you're authoring pages for an intranet where everyone has the same browser, you definitely want to create HTML code that will display properly in the two most popular browsers, Internet Explorer and Navigator. Although Navigator does not provide native support for ActiveX controls such as the ActiveMovie control, the company NCompass Labs Inc. has developed a Navigator plug-in to host ActiveX controls. The plug-in comes in several flavors with different levels of support for hosting and scripting ActiveX controls. Check out the NCompass Labs Web site (http://www.ncompasslabs.com/) for detailed information about their products.
I spent some time playing with one of the NCompass Labs plug-ins called ScriptActive and was able to create HTML code that successfully embedded the ActiveMovie control in both browsers. It's not as simple as you might want it to be because Navigator doesn't support embedding objects with the <OBJECT> tag. You need to use the <EMBED> tag as well. Here's the HTML code I created for a Web page that embeds the ActiveMovie control in both Internet Explorer and Navigator:
<!-- Begin Explorer Code -->
<OBJECT ID="ActiveMovie1" WIDTH=356 HEIGHT=328
CLASSID="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">
<PARAM NAME="_ExtentX" VALUE="9419">
<PARAM NAME="_ExtentY" VALUE="8678">
<PARAM NAME="MovieWindowWidth" VALUE="352">
<PARAM NAME="MovieWindowHeight" VALUE="247">
<PARAM NAME="FileName" VALUE="cybervis.mpg">
<!-- End Explorer Code -->
<!-- Alternative HTML Goes Here -->
<!-- Begin Navigator Code -->
<EMBED NAME="ActiveMovie1" WIDTH=356 HEIGHT=328
CLASSID="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A" SRC="ActiveMovie1.ODS"
PARAM__ExtentX="9419"
PARAM__ExtentY="8678"
PARAM_MovieWindowWidth="352"
PARAM_MovieWindowHeight="247"
PARAM_FileName="c:\windows\desktop\Active~1\cybervis.mpg">
<!-- End Navigator Code -->
</OBJECT>
Note how the code for the <EMBED> tag is nested within the code for the <OBJECT> tag. An important characteristic of the <OBJECT> tag is its ability to allow an alternative for browsers that don't support a particular type of object. In this case, Navigator doesn't support the inclusion of any objects via the <OBJECT> tag and thus interprets the alternative specified with the <EMBED> tag. Internet Explorer fully supports the <OBJECT> tag and ignores the alternative HTML code.
The <OBJECT> tag does not require that you use the <EMBED> tag in the alternative HTML code. If you're a hard-core Internet Explorer advocate, you could write alternative HTML code that gets your message across to Netscape users. For example, consider the following HTML code:
<!-- Begin Explorer Code -->
<OBJECT ID="ActiveMovie1" WIDTH=356 HEIGHT=328
CLASSID="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">
<PARAM NAME="_ExtentX" VALUE="9419">
<PARAM NAME="_ExtentY" VALUE="8678">
<PARAM NAME="MovieWindowWidth" VALUE="352">
<PARAM NAME="MovieWindowHeight" VALUE="247">
<PARAM NAME="FileName" VALUE="cybervis.mpg">
<!-- End Explorer Code -->
<!-- Alternative HTML Goes Here -->
<!-- Don't do this! -->
Sorry dude, your browser can't play this media
because it does not support ActiveX controls.
</OBJECT>
This example illustrates why the alternative HTML part of the <OBJECT> tag is sometimes called the apology section. If you're not careful about how you use the apology section, you can create Web pages that are pretty obnoxious when displayed in the "wrong" browser. Personally, I appreciate Web pages that at least make an honest attempt to be fully functional in all browsers.
Control properties include settings such as the size of the movie window, the appearance of the playback controls, and playback rate. If you're using the <OBJECT> tag (with Internet Explorer) or the <EMBED> tag (with Navigator) to embed the ActiveMovie control you can set a number of control properties in the HTML code. The easy way to set properties is through the Properties dialog box that appears when you edit an ActiveX control with the ActiveX Control Pad. Figure 4 is a screen shot of the Control Pad when editing the ActiveMovie control:
Figure 4. Editing the ActiveMovie Control with the ActiveX Control Pad
The following table lists some of the properties supported by the ActiveMovie control:
| Property | Description |
| AllowChangeDisplayMode | Indicates whether the end user can change the display mode at run time between time and frames. |
| AllowHideControls | Indicates whether the end user can hide the control panel at run time. |
| AllowHideDisplay | Indicates whether the end user can hide the display at run time. |
| AutoRewind | Indicates whether to automatically rewind the multimedia stream when it stops. |
| AutoStart | Indicates whether to automatically start playing the multimedia stream. |
| DisplayBackColor | Specifies the color used for the control background. |
| DisplayForeColor | Specifies the color used for the control foreground. |
| DisplayMode | Indicates whether the control displays the current position in time or frames. |
| EnableContextMenu | Indicates whether to enable the context menu on right click. |
| EnablePositionControls | Indicates whether to enable the position buttons in the control panel. |
| EnableSelectionControls | Indicates whether to enable the selection buttons in the control panel. |
| EnableTracker | Indicates whether to enable the tracker bar in the control panel. |
| FullScreenMode | Expands the area of the OCX so that it fills the entire screen. |
| MovieWindowSize | Selects the image window size and characteristics. |
| PlayCount | Specifies the number of times to play this multimedia stream. |
| Rate | Specifies the playback rate for the stream. |
| SelectionEnd | Specifies the ending position in this multimedia stream, in seconds, relative to the beginning of the stream. |
| SelectionStart | Specifies the starting position in this multimedia stream, in seconds, relative to the beginning of the stream. |
| ShowControls | Indicates whether the control panel is visible. |
| ShowDisplay | Indicates whether the status display panel is visible. |
| ShowPositionControls | Indicates whether the position buttons are visible in the control panel. |
| ShowSelectionControls | Indicates whether the selection buttons are visible in the control panel. |
| ShowTracker | Indicates whether the tracker bar is visible in the control panel. |
For a complete description of all of the properties of the ActiveMovie control, look at the ActiveMovie Control Reference (this reference is available in Windows Help format in the accompanying zipped file).