Web Reference

The Object Tag

Part One: Audio

So you want to put some sound on your web page? Well the easiest (and least problematic) way to do this is to simply create a link (using <a href>) that points to the sound file. But this isn't very elegant.

So what if we want to embed a sound file into the content of a page? Well, once upon a time you had two choices: <embed> for Netscape and <bgsound> for Explorer; however both are rapidly going the way of the dinosaur. Today the tag of choice is the <object> tag. Here is the basic code to embed an mp3 file on a page using the <object> tag:

<object type="audio/x-mpeg" data="fileName.mp3" width="200" height="16" autoplay="false">

</object>

 

The "type" is the mime type that identifies that kind of file (mp3, mov, ra, etc.). "Data" points to the desired file (much like a url). "FileName.mp3" should be replaced by the name of the audio file you are embedding. "Width" and "height" determine the size of the controller. "Autoplay" is pretty self explanatory. There are additional attributes that can be used (though not every browser will recognize every one).

Easy right? Well, now things get more complicated. The information above should be all that you need according to W3C recommendations, and for some browsers (Firefox, etc.) it is. But, alas, some browsers (Explorer 6, Explorer 7 and Safari) require additional information to "prompt" them (new code is in red):

<object type="audio/x-mpeg" data="fileName.mp3" width="200" height="16" autoplay="false">

<param name="src" value="fileName.mp3" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<param name="autostart" value="0" />

</object>

 

The "param" tags contain the same information as in the <object> tag, just written in a different way. As with the <object> attributes, additional <param> tags can also be added (one of my favorites is "kioskmode").

We're done, right? Nope. Then there's the issue of old versions of IE which need to be told what media player to use, especially when attempting to play non-Windows Media Player files. This is where the "class id" comes in; two <object> tags are nested within one another, one using a classid (for IE), one using a mime (for everyone else). Standards-compliant browsers like Firefox ignore the classid crap and jump to the <object> tag that contains the mime type. Explorer needs the class ID, but gets confused by the <object> tag with the mime type and will display something hideous or give you an error. Therefore we add the funky comment tags to prevent Explorer from seeing what it shouldn't (oh by the way, IE sucks):

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"
width="200" height="16">

<param name="src" value="fileName.mp3" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<param name="autostart" value="0" />

<param name="pluginspage" value="http://www.apple.com/quicktime/download/" />

<!--[if !IE]> <-->

<object type="audio/x-mpeg" data="fileName.mp3" width="200" height="16">
<param name="src" value="fileName.mp3" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<param name="autostart" value="0" />
<param name="pluginurl" value="http://www.apple.com/quicktime/download/" />

</object>

<!--> <![endif]-->

</object>

 

Finally, some older browsers (Netscape 4) require the old <embed> tag. This can be nested between the inner <object> tags as below:

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="200" height="16">

<param name="src" value="fileName.mp3" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<param name="autostart" value="0" />
<param name="pluginspage" value="http://www.apple.com/quicktime/download/" />

<!--[if !IE]> <-->

<object type="audio/x-mpeg" data="fileName.mp3" width="200" height="16">
<param name="src" value="fileName.mp3" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<param name="autostart" value="0" />
<param name="pluginurl" value="http://www.apple.com/quicktime/download/" />

<embed src="fileName.mp3" type="audio/x-mpeg" width="200" height="16" autostart="false" controller="true" ></embed>

</object>

<!--> <![endif]-->

</object>

 

Fortunately, most modern browsers recognize the <object> tag; soon the <embed> tag may be completely unnecessary.

Variations

So what about other sound formats? You will need to change the "type" to the appropriate mime type (see a partial list below):

 

As for "class id's," and "codebase's," see the list below:

Video

As with audio, the best way to get video on to a web page is through the use of the <object> tag. And we employ it pretty much the same way we did in the audio exercise; we just need to change the MIME types and other relevant file data (file name, location, etc).

That being said, we do need to pay close attention to the video display size (height & width). With audio, the physical size determined the size of the controller, which was pretty flexible. But with video, we need to make sure we set the height & width to the size of the actual video plus the height of the controller (typically 16-20 pixels). Thus a 320 x 240 Quicktime video should be set to 320 x 256 pixels.

Once again, the full code for embedding a file (in this case a Quicktime movie) will look something like this:

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="256">

<param name="src" value="yourMovie.mov" />
<param name="controller" value="true" />
<param name="autoplay" value="true" />
<param name="autostart" value="1" />
<param name="pluginspage" value="http://www.apple.com/quicktime/download/" />

<!--[if !IE]> <-->

<object type="video/quicktime" data="yourMovie.mov" width="320" height="256">
<param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
<param name="controller" value="true" />
<param name="autoplay" value="true" />
<param name="autostart" value="1" />

<embed src="yourMovie.mov" type="video/quicktime" width="320" height="256" autostart="true" controller="true" ></embed>

</object>

<!--> <![endif]-->

</object>

 

As for the other video formats, you will need to change the "type" to the appropriate MIME type, as well as the "Class id's" and "codebases" (see above).

Real Media Player Considerations

The Real Media Player has some unique parameters you have to use in the <object> tag. In order to see the video display you must include:

<param name="controls" value="ImageWindow">

<param name="console" value="one">

 

And the "controller" parameter does not do anything so you can dump it. To see a controller, you actually have to embed the controller separately. Basically copy and paste the entire <object> tag block that you used to embed the .rm file and change <param name="controls" value="ImageWindow"> to <param name="controls" value="all">. Also change the height (try 60px).

Finally remove all references to Quicktime (or other player) plug-ins. Everything else stays the same, including the "src." To get it to appear below the video window you will have to use a <br> or a table or CSS.

Here's how your code should look for Real Media; Real Media changes are in red (note that I eliminated the annoying <embed> tags too):

<object id=RVOCX classid="clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA"width="320" height="256">

<param name="src" value="yourMovie.rm" />
<param name="controller" value="true" />
<param name="autoplay" value="true" />
<param name="autostart" value="1" />
<param name="controls" value="ImageWindow">
<param name="console" value="one">


<!--[if !IE]> <-->

<object type="application/vnd.rn-realmedia" data="yourMovie.rm"width="320" height="256">
<param name="controller" value="true" />
<param name="autoplay" value="true" />
<param name="autostart" value="1" />
<param name="controls" value="ImageWindow">
<param name="console" value="one">

</object>

<!--> <![endif]-->

</object>

<object id=RVOCX classid="clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA"width="320" height="256">

<param name="src" value="yourMovie.rm" />
<param name="controller" value="true" />
<param name="autoplay" value="true" />
<param name="autostart" value="1" />
<param name="controls" value="ImageWindow">
<param name="console" value="all">


<!--[if !IE]> <-->

<object type="application/vnd.rn-realmedia" data="yourMovie.rm"width="320" height="256">
<param name="controller" value="true" />
<param name="autoplay" value="true" />
<param name="autostart" value="1" />
<param name="controls" value="ImageWindow">
<param name="console" value="all">

</object>

<!--> <![endif]-->

</object>

References & Resources

Back to the top