Embedding AVI Files

Topics on this page:

1. The <embed> tag
2. The <object> tag

The <embed> tag

Here is an example of how to embed a couple of AVI files: grinder.avi and cup.avi. Grinder autostarts and runs forever. Cup does not autostart and runs just once when activated.

<embed src="grinder.avi" width="60" height="100"
       autostart="true" loop="true" />
<embed src="cup.avi" width="100" height="100" />

Netscape's Handling of <embed>

I included these two AVIs on a page along with some text and a WAV file for sound. It looked like this (this is a screen shot, not AVIs - they won't play!):

Clicking on the autostarted grinder.avi causes it to pause. Clicking again restarts it. Clicking on the cup.avi starts it, and it runs just once. Clicking on it while it's running pauses it. Right-clicking on either avi brings up a menu with a few additional options.

What you see in Netscape may differ from this. If you've installed a plug-in that handles AVIs, you'll see whatever that plug-in displays. If you don't know what plug-in you're using, choose "Help | About Plug-ins". You'll see a table displayed for each plug-in you have installed. Scroll down until you find "avi" listed in the Suffixes column in one of these tables, and that's the plug-in that's invoked to handle AVI files. As far as I know, I'm using the default plug-in that was installed when I installed Netscape. It's listed as "NPAVI32 Dynamic Link Library."

If you're using a different plug-in for AVIs (such as RealPlayer), you may see something quite different from what I see when you view the page with the AVIs on it. You may see some controls underneath the avi. Since I've never used a plug-in other than the default one for AVIs, I can't help you much on what's happening.

If you want to, you can temporarily remove the plug-in you're using to fall back to the default one. Note the file name shown for the plug-in (the complete path name is shown). Shut down Netscape. Rename the file to something that does not start with an N. I usually add a z prefix (eg., rename NPAVI32 to zNPAVI32). When you restart Netscape, your plug-in will no longer be there and if you have the default one it will now handle AVIs for you. To get your plug-in back, just shut down Netscape again and rename the file back to what it was. NOTE: I haven't tried this procedure for AVI plug-ins, but I've used it to temporarily remove my Crescendo and MidPlug midi plug-ins and it's worked fine.

IE's Handling of <embed>

When I viewed the page in IE I saw quite a different look:

I was using IE 4 for this, and the plug-in used was IE 4's default ActiveMovie 2.0. I believe that ActiveMovie now goes by the name DirectShow (part of Windows Media Player), which is probably what you've got if you're using IE 5 (I don't know this for a fact). You may notice that I really don't know a lot about this stuff, I'm just sharing my observations.

In Netscape, a single click on either AVI started it (or paused it if it was already running). In IE, I had to double-click on the AVI to accomplish the same thing, or use the controls. Right-clicking on an AVI brought up a menu with a few options on it. One option removes the controls, making the AVI look similar to the Netscape look - but still requiring the double-click instead of a single-click. The "Properties" option brings up a box with quite a few things for you to play around with. Be sure to explore this.

Since it's possible to make the controls go away, I began to wonder if there was some attribute that could be added to the <embed> tag to have the AVIs be displayed initially without controls. I tried some obvious ones such as controls="no", but had no luck. Finally I spent some time searching the web and looking for information on ActiveMovie. I've come to the conclusion that this is not possible using <embed>. But Microsoft recommends using <object> for displaying AVIs, and <object> does provide that capability. Which brings me to the next topic...

The <object> Tag

The <object> tag is intended for embedding any type of external content into a web page. It may eventually completely replace all other tags that currently embed external content eventually (this includes <embed>, <bgsound>, <applet> and <img>).

The basic format of an <object> tag is:

<object ...>
  <param ... />
  <param ... />
  ...
  [alternate content]
</object>

The <object> tag itself identifies the type of object being embedded and provides information that the BROWSER needs to know about the object. The <param> tags contain additional information that the browser doesn't need to know about but that the program that actually deals with the object needs. The browser runs the program that handles the object and simply hands all of the parameters to it.

If the browser supports the particular object being defined, it is supposed to ignore all content between <object> and </object> except the <param> tags. If the browser does not support the particular object, it is supposed to act on this content. This could be simply a message telling the visitor that his browser doesn't support the object, or it can be anything else (even another <object> tag). In our case, we'll use an <embed> tag for our alternate content, and a browser such as Netscape with its default plug-in will use that instead of the object that it doesn't support.

Here's the code for our two AVIs using an <object> for IE and an alternate <embed> for Netscape.

<object classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A"
        width="60" height="100">
  <param name="FileName"          value="grinder.avi" />
  <param name="ShowDisplay"       value="0" />
  <param name="ShowControls"      value="0" />
  <param name="AutoStart"         value="-1" />
  <param name="PlayCount"         value="0" />
  <param name="MovieWindowWidth"  value="60" />
  <param name="MovieWindowHeight" value="100" />

  <embed src="grinder.avi" width="60" height="100"
         autostart="true" loop="true" />
</object>

<object classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A"
        width="100" height="100">
  <param name="FileName"          value="cup.avi" />
  <param name="ShowDisplay"       value="0" />
  <param name="ShowControls"      value="0" />
  <param name="AutoStart"         value="0" />
  <param name="PlayCount"         value="1" />
  <param name="MovieWindowWidth"  value="100" />
  <param name="MovieWindowHeight" value="100" />

  <embed src="cup.avi" width="100" height="100" />
</object>

Parameters that have a yes/no value use a value of -1 for yes and 0 for no. PlayCount uses 0 to play forever or a positive number to indicate the number of times to show the movie. The rest is pretty much self-explanatory. And, yes, you have to specify that whole long classid value just like I've shown it here (pretty ridiculous, eh?).

Here's what these look like. Please be patient. "grinder.avi" is 87K and "cup.avi" is 57K.

Depending on your browser and plug-in, a single-click or a double-click will pause and resume grinder.avi.

Depending on your browser and plug-in, a single-click or a double-click will play cup.avi once.
>

Whichever browser and plug-ins you're using, be sure and right-click on the avi and explore the options that are available to you.

There are quite a few additional options that can be specified in <param> tags for AVIs. I had found a pretty good page somewhere on Microsoft's site that listed these, but it seems I forgot to bookmark it and I can't find it right now. If you want to explore ActiveMovie in more detail, you might start where I did - I searched for ActiveMovie in Alta Vista. There were many interesting sites to explore, some on Microsoft's site and some elsewhere. You're sure to turn up some interesting information.