Playing Multimedia | Dynamic HTML in Action

Historically, playing audio and video depended on third-party products called plug-ins. As browsers matured, more and more of the functionality provided by multimedia plug-ins was incorporated into the browser itself. Unfortunately, this means that multimedia is one of the hardest areas to get backward compatibility in, since support varies from browser to browser and version to version.

The <EMBED> Tag

The most common method of adding sound to Web pages is with the <EMBED> tag. It can also be used to add video and is supported in both browsers, back through at least version 3. Listing 17-1 demonstrates a simple use of <EMBED> to add a sound to a page. Figure 17-1 shows what the sound control panel looks like in Internet Explorer. Figure 17-2 shows the contents of the same page displayed in Netscape Navigator.

Code Listing 17-1.

 <HTML> <HEAD> <TITLE>Listing 17-1</TITLE> </HEAD> <BODY> <EMBED SRC="music.wav"        VOLUME="50"        HEIGHT="60"        WIDTH="145"        AUTOSTART="true"        ALIGN="left"        HIDDEN="false"        LOOP="true"> </EMBED> </BODY> </HTML>

click to view at full size.

Figure 17-1. A sound control panel in Internet Explorer.

click to view at full size.

Figure 17-2. The same content in Netscape Navigator 4.

Note that the page displays differently in Netscape Navigator and Internet Explorer. The appearance of the sound control panel is not the only difference in how the two browsers handle this tag. Each supports a number of attributes and features that the other does not, and some of the attributes shared between the two browsers have different defaults. Table 17-1 provides an overview of the different attributes supported.

Table 17-1 Function and Default States for <EMBED> Tag Attributes in Internet Explorer and Netscape Navigator

Attribute	Function and Default
ALIGN	Functions exactly the same as ALIGN for <IMG> tags
AUTOSTART	true or false. Controls whether media starts automatically. The default depends on the browser, platform (Macintosh or PC), and state of the HIDDEN attribute, so it is usually better to explicitly state the value you want for this attribute.
ENDTIME	Expressed in mm:ss. Specifies when the media track should stop. Navigator only.
HEIGHT	Specifies the height of the panel in pixels. Navigator might exhibit unpredictable behavior if this is not specified.
HIDDEN	true or false. Controls whether the panel is visible. A setting of true is valuable for creating background soundtracks to a page.
HREF	Set to a URL to make the panel a hyperlink. Internet Explorer only.
LOOP	true or false. Navigator supports numeric values that function like PLAYCOUNT does for Internet Explorer.
NAME	Gives a name to the control.
PLAYCOUNT	Specifies the number of times the media should be repeated. Internet Explorer only.
PLUGINSPACE	Specifies where to find any plug-in necessary to play the media. This should be unnecessary if you stick to standard formats, such as WAV and MID.
PLUGINURL	Specifies where to find any software necessary to install a plug-in specified in PLUGINSPACE. Navigator only.
SRC	The location of the file to be played.
STARTTIME	Expressed in mm:ss. Specifies where in the media file the control should start playing. Navigator only.
TARGET	Acts like the TARGET attribute of an <A> tag. Works only if HREF is also set. Internet Explorer only.
VOLUME	Sets the volume of the audio. Navigator only. Internet Explorer plays back the equivalent volume to a setting of 50.
WIDTH	Specifies the width of the panel in pixels. Navigator might exhibit unpredictable behavior if this is not specified.

Code Listing 17-1 embeds a sound track in the Web page. Video can be embedded instead in the page by simply changing the SRC attribute so that it points to a video file instead of an audio file. This is demonstrated in Code Listing 17-2. The results are displayed in Figures 17-3 and 17-4.

Code Listing 17-2.

 <HTML> <HEAD> <TITLE>Listing 17-2</TITLE> </HEAD> <BODY> <EMBED SRC="clouds.avi"        VOLUME="50"        HEIGHT="286"        WIDTH="320"        AUTOSTART="true"        ALIGN="left"        HIDDEN="false"        LOOP="true"> </EMBED> </BODY> </HTML>

click to view at full size.

Figure 17-3. A video control panel in Internet Explorer.

click to view at full size.

Figure 17-4. The same content in Netscape Navigator 4 after the video is started.

When the page first loads in Netscape Navigator, you may notice the instructions Double-click to activate the embedded Video Clip in the bar at the bottom of the window. After these instructions are followed, the page contents display as shown in Figure 17-4. Note that the video control panel in Internet Explorer is the same as its audio control panel. This is not the case in Netscape Navigator. Also, Netscape Navigator 3 requires a plug-in to play the file. If the user does not already have a plug-in for playing video files, he or she will be prompted to download one from a central Netscape download location.

In Internet Explorer, the <EMBED> tag is one way of accessing the Microsoft Media Player control (also known as the Microsoft ActiveMovie Control), which provides all the audio and video functionality in Internet Explorer. Far more powerful and precise manipulation of the Media Player control can be accomplished by issuing commands to it directly through script. This will be covered in the next chapter.

Media in an External Window

The <EMBED> tag is used to embed a video or audio clip in a Web page. To play a movie (or audio) in an external window, you need to cause the browser to launch an external media player. This can be accomplished with several mechanisms, two of which follow.

Referencing Media with the Anchor Tag

If an anchor tag's HREF attribute references a media file, clicking that anchor will play the media file in the system's default media player, as demonstrated in Code Listing 17-3, below. When the Clouds hyperlink is clicked, both Internet Explorer and Netscape Navigator launch the Windows Media Player. It plays the movie in a separate window displayed in front of the browser, as shown in Figure 17-5, below. (It will launch a different player if another one is the system default.)

Code Listing 17-3.

 <HTML> <HEAD> <TITLE>Listing 17-3</TITLE> </HEAD> <BODY> <A HREF="clouds.avi">Click here to launch the Clouds video.</A> </BODY> </HTML>

click to view at full size.

Figure 17-5. This technique plays the video in an external window.

You will notice that the Windows Media Player controls are very similar to those displayed by the <EMBED> tag in Internet Explorer. This is because Windows uses the same media player program for the <EMBED> tag, scripting the Media Player control, and playing regular media files. Each is just a different interface to Windows Media Player (available on the Start Menu under Programs/Accessories/Entertainment, at least on Windows 98).

Referencing Media with window.location Through Script

A second method, similar to the <A> tag method above, is to change the value of the location property of the window object to point to a media file. Listing 17-4 demonstrates this technique.

Code Listing 17-4.This will display the same type of external window as Code Listing 17-3.

 <HTML> <HEAD> <TITLE>Listing 17-4</TITLE> </HEAD> <BODY> <FORM> <INPUT TYPE="button" VALUE="Click here to launch the Clouds video"        onclick="window.location=`clouds.avi'"> </FORM> </BODY> </HTML>

In this case, we choose to use a button on a form to launch the movie because both Netscape Navigator and Internet Explorer support the onclick event on an INPUT of TYPE= "button" and can thus use one to launch a script.