General Reference

Embedding Media Files

Introduction

Getting audio and video media on a Web page as always been a challenging proposition. This is because for years there was no standard method for doing it—different browsers supported different tags and different kinds of media. In an effort to make things more uniform the World Wide Web consortium recommended (years ago) that the <object> tag be used whenever media was to be embedded on to a Web page. However, not every browser chose to implement the recommendation, and worse, those that did often implemented things differently than others. The result was a bit of a mess.

MPEGs (including MP3s and MP4s)

Here is the basic code to embed an MP4 movie file on a page using the object tag:

<object type="video/x-mpeg" data="myMovie.mp4" width="320" height="256" autoplay="false">  
</object>

The "type" is the MIME type (usually pronounced "meem") that identifies that kind of file it is. Some common MIME types include:

"audio/basic" (AU)
"audio/wav" or "audio/x-wav" (WAV)
"audio/x-pn-realaudio" (REAL Audio)
"application/vnd.rn-realmedia" (REAL Media)
"audio/x-mpeg" (MP3)
"video/x-mpeg" (MPEG video, MP4)
"audio/x-ms-wma" (WindowsMediaAudio)
"video/x-sgi-movie" (WindowsMediaVideo)
" video/x-ms-asf" (ASF)
"video/avi" or "video/x-msvideo" (AVI)
"application/x-shockwave-flash" (SWF)

The "data" attribute points to the desired file (using a URL). "Width" and "height" determine the size of the player and controller; here I've added 16 pixels to the standard Quicktime Web video height of 240 to make room for the Quicktime player controls. "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 most modern browsers it is. But, alas, some older browsers (Explorer 6, Explorer 7) require additional information to "prompt" them (new code is in black):

<object type="video/x-mpeg" data="myMovie.mp4" width="320" height="256" autoplay="false">
    <param name="src" value="myMovie.mp4" />
    <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 for Quicktime players 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). This method is often referred to as the twice cooked method. Standards-compliant browsers like Firefox ignore the classid and jump to the object tag that contains the MIME type. Explorer needs the class ID, but gets confused by the second object tag with the mime type and will display something hideous or give you an error. Therefore we add the funky comment tags below to prevent Explorer from seeing what it shouldn't:

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
            codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="256">
    <param name="src" value="myMovie.mp4" />
    <param name="autoplay" value="false" />
    <param name="autostart" value="0" />
     
    <!--[if !IE]> <-->
     
    <object type="video/x-mpeg" data="myMovie.mp4" width="320" height="256" autoplay="false">
        <param name="src" value="myMovie.mp4" />
        <param name="autoplay" value="false" />
        <param name="autostart" value="0" />
    </object>
     
    <!--> <![endif]-->
</object>

It's also recommended that you add a link to the Apple plug-ins page when using the Quicktime player:

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
            codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="256">
    <param name="src" value="myMovie.mp4" />
    <param name="autoplay" value="false" />
    <param name="autostart" value="0" />
    <param name="pluginspage" value="http://www.apple.com/quicktime/download/" /> 

    <!--[if !IE]> <-->
     
    <object type="video/x-mpeg" data="myMovie.mp4" width="320" height="256" autoplay="false">
        <param name="src" value="myMovie.mp4" />
        <param name="autoplay" value="false" />
        <param name="autostart" value="0" />
        <param name="pluginspage" value="http://www.apple.com/quicktime/download/" /> 
    </object>
     
    <!--> <![endif]-->
</object>

Yuck. All that code to add a single sound or movie.

Flash

Embedding a Flash SWF file also requires the use of the <object> tag. However there are several attributes & parameters that we use with Quicktime that we don't need, and there are a few Flash specific ones we do need. Here is an example of the code for a typical Flash SWF; I've highlighted the things which are different:

<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400">
    <param name="movie"value="myFlashMovie.swf" />
    <param name="quality" value="high" />       
    <param name="wmode" value="opaque" /> 

    <!--[if !IE]>--> 
 
    <object type="application/x-shockwave-flash" data="myFlashMovie.swf" width="550" height="400">
        <param name="quality" value="high" />       
        <param name="wmode" value="opaque" /> 
    </object>  
    
    <!--<![endif]-->  
</object>

Very similar to what we saw above, but the links to the Quicktime plug-ins page have been removed. Likewise we have no need for the autoplay parameters, they don't effect Flash movies. Instead we have two Flash specific parameters—quality and wmode.

Quality is the quality at which you wish your Flash movie to play. If no quality is specified, the default is "high". Wmode controls the transparency of the Flash movie; set it to "window" to play the SWF in its own rectangular window on a web page. Set it to "opaque" to hide everything on the page behind it. Set it to "transparent" to have the background of the HTML page shows through all transparent portions of the SWF file.

There may be a problem with this code (actually there are several but most aren't worth getting into now). Most on-line sources I've checked add an extra pair of comments, which makes the code look like this:

<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400">
    <param name="movie" value="myFlashMovie.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
       
    <!--[if !IE]>--> 
 
    <object type="application/x-shockwave-flash" data="myFlashMovie.swf" width="550" height="400">    
        <!--<![endif]-->    
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />      
        <!--[if !IE]>-->
    </object>  
    
    <!--<![endif]-->  
</object>

It's also a good idea to include a prompt for those people who don't have a Flash player:

<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400">
    <param name="movie" value="myFlashMovie.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
       
    <!--[if !IE]>--> 
 
    <object type="application/x-shockwave-flash" data="myFlashMovie.swf" width="550" height="400">    
        <!--<![endif]-->    
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />  
        
        <div> 
            <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
            <p><a href="http://www.adobe.com/go/getflashplayer">
            <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" 
                    alt="Get Adobe Flash player" /></a></p>
        </div> 

        <!--[if !IE]>-->
    </object>  
    
    <!--<![endif]-->  
</object>

The way the object tags works is it tries to play the media specified; but failing that it will continue to try whatever commands follow within the tag. So if the browser can not play the specified movie, it will instead display the content in the <div> tags. If the movie plays, this part will be ignored.

This should work, but it's a coding mess. Many people have devoted numerous hours to finding a better ways to embed media on Web sites, and there have been some novel solutions. The Satay method manages to use minimal code, but requires a special preloader be build into the Flash movies. It works pretty well if you know Flash, although it doesn't work in all browsers. Another solution is to use Javascript—specifically the DOM—to sniff out the browser in use and write the proper code for that browser. The SWFObject is a block of pre-written Javascript code that developers can use in their Web pages. Of course, this solution requires the user have Javascript enabled. And it's trickier to implement for Web design novices. Still I think it's perhaps the most promising solution out there.

Flash video (FLV)

Flash video (FLV) is a but trickier; it needs to be played through a Flash SWF file. One option if you want to put Flash video on your site is to use the built-in tool in Dreamweaver that allows you to embed Flash video (and creates a spiffy SWF player in the process). However, not everyone has Dreamweaver. Another (better?) option is to use of the open-source Flash-based video player FlowPlayer. I discuss its use in another tutorial (dealing with video in HTML 5) located here.

Other formats

So what about other media formats? You will need to change the "type" attribute to the appropriate mime type (see the list above). As for "class id's," and "codebase's," choose from the list below:

To specify the Windows Player: classid="6BF52A52-394A-11d3-B153-00C04F79FAA6" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/ nsmp2inf.cab#Version=6,0,02,902"
To specify Real Media Player: id=RVOCX classid="clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA"

Daniel C. Fergus

Artist & Educator