Embedded Media Files (Web Design in a Nutshell, 2nd Edition)

Images aren't the only things that can be displayed as part of a web page. You can also include content such as Quicktime movies, interactive Flash files, all manner of Java applets, and more. The browser renders embedded media files using the provided code (as in the case of an applet), using its built-in display devices (as for GIF or JPEG images), or by taking advantage of a plug-in or helper application.

The three tags that embed media in HTML are <object> (the HTML 4.01 preference for all media), <applet> (for Java applets; deprecated in HTML 4.01), and <embed> (for plug-in dependent media; not even recognized in HTML 4.01). Following are overviews of each of these tags and their uses.

12.5.1. The <object> Tag

The <object> tag is an all-purpose object-placer. It can be used to place a variety of object types on a web page, including applets (Java or ActiveX), multimedia objects, and even plain old images.

It began as a proprietary tag in Internet Explorer to support ActiveX and later Java applets. Netscape Navigator initially supported only <embed> and <applet> (discussed later in this chapter) for embedding media, but added limited <object> support in its Version 4 release, and full support in Version 6. Currently, the <object> tag enjoys a hearty endorsement by the HTML 4.01 specification as the "right" way to add any media object to a web page.

The <object> tag has a large number of attributes that customize its use to the type of media being placed. It shares many attributes with the <img> tag for controlling placement on the page (such as align, width, height, vspace, and hspace). A complete list of attributes for the <object> tag is detailed in Section 12.1, "Summary of Object Placement Tags" earlier in this chapter.

The syntax for the <object> tag varies with the type of content it is placing. The following examples should provide a general understanding of its use.

12.5.1.1. Adding an image

In this example, the <object> tag is used simply to place an image on the page.

<OBJECT DATA="daffodil.gif" TYPE="image/gif">
A color photograph of a daffodil.
</OBJECT>

Here, the data attribute specifies the source for the object (in this case a graphic file) and type tells the browser that the content type is a GIF image. The text enclosed within the <object> tags is used as alternative text if the object can't be rendered. While the syntax exists for adding images with the <object> tag, the <img> tag is still the most common way to go and isn't likely to be phased out of the HTML standard. This format is currently supported only by Internet Explorer 5+ and Netscape 6.

12.5.1.2. Adding plug-in media

The <object> tag can also be used to place media played by browser plug-ins and helper applications, such as Flash or Director movies. Note that some browsers support only the <embed> tag for embedding plug-in media, so in many cases you'll need to use a combination of the two tags. This is discussed in more detail in Part IV.

In this example, a Flash movie is added via the <object> tag (it has been abbreviated to emphasize the tag structure; see Chapter 26, "Flash and Shockwave" for the full values).

<OBJECT CLASSID="clsid:D27..." CODEBASE="http://active.macromedia.com/"   
    WIDTH="300" HEIGHT="150">
  <PARAM NAME="MOVIE" VALUE="moviename.swf">
  <PARAM NAME="LOOP" VALUE="false">
</OBJECT>

When used for a plug-in media type, classid functions like <embed>'s pluginurl attribute, which points to the place where the appropriate plug-in can be found and automatically installed. In this case, it points to an ActiveX control that will be used to play the movie for Internet Explorer users on Windows machines.

codebase provides a base URL based on which relative URLs for classid, data, and archive attributes should be evaluated.

Some plug-in media and applets require width and height values in order to play correctly, so be sure to read any documentation provided for your media type.

12.5.2. The <embed> Tag

The <embed> tag places a media object, such as a Flash movie or the controls for a RealAudio track, on a web page. It displays the media object in a rectangular area that behaves much like an inline image in terms of text flow positioning. The <embed> tag was originally created by Netscape for use with plug-in technologies. It is currently supported by both browsers; however, the HTML 4.01 specification prefers the use of the <object> tag with the data attribute for the placement of multimedia elements.

When the browser encounters the <embed> tag, it matches the suffix of the file name (Navigator also looks for the value of the type attribute) with the appropriate plug-in.

The following is a very simple example of the <embed> tag:

<EMBED SRC="url" HEIGHT="165" WIDTH="250" ALIGN="right" HSPACE="6">
</EMBED>

The src attribute is required to tell the browser the location of the media file to be played. Many media types require that the width and height values (the dimensions of the plug-in element in pixels) be specified in order for the plug-in to function.

If you are triggering plug-in functions from a script, you need to give the element a name using the name attribute.

Like images, media objects can be positioned using the align attribute and its related hspace and vspace settings. In Internet Explorer, you can also specify alternative text with the familiar alt attribute.

There are a few special attributes supported only by Version 4.0 and higher browsers that you might also want to include. To hide the media file or object from view, use the hidden attribute with a value of yes. The pluginspage attribute provides the URL of a page where the user can download information for the required plug-in should it not be found on the client machine. Netscape 4.0 introduced the pluginurl attribute, which specifies a link to a function that installs the plug-in automatically.

The complete list of attributes for the <embed> tag is detailed in the Section 12.1, "Summary of Object Placement Tags" section earlier in this chapter.

12.5.2.1. Plug-in-specific attributes

In addition to these standard attributes, the <embed> tag may also contain plug-in-specific attributes for controlling the function of the player. The attributes loop, autostart, autoplay, and volume are examples of media-specific controls. Complete <embed> tags with their respective attributes are listed for several media types in Chapter 24, "Audio on the Web", Chapter 25, "Video on the Web", and Chapter 26, "Flash and Shockwave".

12.5.2.2. <noembed>

The <noembed> tag provides alternative content that displays if the browser cannot display the specified media file. In the following example, the browser would display the GIF file in place of the media object.

<EMBED SRC="cool.swf" HEIGHT="165" WIDTH="250" ALIGN="right" HSPACE="6">
<NOEMBED><IMG SRC="needplugin.gif"></NOEMBED>
</EMBED>fs