Dynamic HTML in Action

The Media Player control is almost always used to include video and audio in Web documents with Internet Explorer 4 and later. Because this control is built into Internet Explorer, there are no extra components for the user to download and install. The Media Player control supports many common media types, including AVI and QuickTime video, WAV and MIDI audio, and MPEG video and audio. Code Listings 18-3 through 18-6 demonstrate Internet Explorer_specific use of the Media Player control. However, a Netscape Plug-in is available that allows the use of the Media Player inside Navigator. Code Listing 18-7 demonstrates a cross browser technique.

NOTE

Using the OBJECT Element

Although the Media Player control is used implicitly in the examples above through the use of an HTML tag, explicitly embedding the Media Player control with an OBJECT (or OBJECT and EMBED) element allows you to manipulate the control's properties in many more ways. Like other objects used directly within an HTML page (such as the multimedia controls discussed in Chapter 19), the Media Player control requires that you open and close the OBJECT tags (<OBJECT> and </OBJECT>) and include a CLASSID. The basic syntax is as follows:

Under most circumstances, it is useful to give the control a name with the ID attribute and to set some of the control's properties with <PARAM> tags between the opening and closing object tags. Code Listing 18-3 and Figure 18-2 show a basic example of using the Media Player control with some <PARAM> tags.

Code Listing 18-3.

Figure 18-2. A basic use of the Media Player control.

<PARAM> tags typically have two attributes. NAME is used to specify the name of the property that we want to set. VALUE is the value we want to set the property to. The Media Player control has many properties, including FileName and AutoStart. We set the FileName property to the location of the file we want the Media Player to play and the AutoStart property to true, which causes the control to play the file automatically.

Properties can be set with either <PARAM> tags or directly through script using dot notation. For example, the script command MPlyr.ShowControls=true would have the same effect as <PARAM NAME="ShowControls" VALUE="true"> given that the control had the attribute ID="MPlyr". Code Listing 18-4 demonstrates setting properties through <PARAM> tags and through script. It also shows examples of how some of the Media Player control's methods are called.

Code Listing 18-4.

The OBJECT element in Code Listing 18-4 embeds the Media Player control in the page. We use the <PARAM> tags to set values for certain properties at design time—that is, we specify the value for each property as we write the HTML code. The user can modify the values of these properties at run time by clicking the buttons on the page. These buttons use script that dynamically changes some of the properties of the embedded control. For example, clicking the Hide Display button sets the value of the ShowDisplay property to false, turning off the video display. Clicking the Show Display button sets the value back to true, turning the display back on. The Show/Hide Tracker and the Show/Hide Controls buttons use the JScript ?: operator (discussed in Part 2) to combine both the show and hide actions into one button. The results of this code listing are shown in Figure 18-3.

Figure 18-3. Using script to change a control's properties.

The Play, Stop, and Pause buttons each access a different method of the Media Player control to change the state of the control. Note that they are accessed just like methods in the DHTML Object Model, covered in Chapter 6.

There are many other properties available that can be scripted on the Media Player control. Some of the more useful ones are listed in Table 18-1.

Table 18-1 Media Player Properties

There are many additional properties (not discussed here) that can be used to control the Media Player from within a Web page or even a C++ or Microsoft Visual Basic program. A full description of the Media Player properties can be found at the Microsoft DirectX site; go to microsoft.com/directx/dxm/help/mmp_sdk/default.htm, or link from the MSDN Online Resource page at msdn.microsoft.com/resources/schurmandhtml.htm by choosing Media Player Properties.

Media Player also supports a number of events, including buffering, click, dblclick, disconnect, displaymodechange, endofstream, error, keydown, keypress, keyup, markerhit, mousedown, mousemove, mouseup, newstream, openstatechange, playstatechange, positionchange, readystatechange, scriptcommand, warning. One of the most useful of these events is readystatechange, because it indicates whether the player can play a file.

Code Listing 18-4 demonstrated the Stop, Play, and Pause methods. In addition to these, Media Player supports the AboutBox, Cancel, FastForward, FastReverse, GetCodecDescription, GetCodecInstalled, GetCodecURL, GetMarkerName, GetMarkerTime, GetMediaInfoString, GetMoreInfoURL, GetStreamGroup, GetStreamName, GetStreamSelected, IsSoundCardEnabled(), Next, Open, Pause, Play Previous, Stop, and StreamSelect methods. IsSoundCardEnabled() is very useful because it returns information about the ability of a user's machine to play audio. You can find more information about these methods and events on the DirectX site.

Sound

If a user's computer lacks a sound card or audio is unavailable for some other reason, there is a possibility that script errors might occur when trying to use sound. The Media Player control lets you test a system's audio capability and then take action based on the results. As an example, Code Listing 18-5 uses the IsSoundCardEnabled method to test for sound. As the code indicates, if no sound card is available, a warning such as the one in Figure 18-4 is displayed to the user.

This example represents a simple response to the sound test. You can make the response more sophisticated, for instance, by taking the user to another page or by displaying text when sound is not available.

Code Listing 18-5.

Figure 18-4. A warning is displayed to the user if sound is not available.

The Media Player control also provides the ability to "layer" media, which allows you to play multiple media files at the same time and control each one through script. To demonstrate, let's take our music clip from the previous example and add another layer to it, as shown in Code Listing 18-6. We'll also add buttons, shown in Figure 18-5, that will control whether a layer is playing, and at what volume.

Code Listing 18-6.

Figure 18-5. You can control sound layers with input buttons and script.

When the user opens the page we created in Code Listing 18-6, both sound files start to play. Each one has PlayCount set to 0 so that it repeats endlessly. The user can click the appropriate button to toggle each sound on or off. For further control over the layers, there are volume buttons for each layer.

NOTE

Use of the Media Player in Netscape Navigator

A Netscape plug-in has been created that allows the use of the Media Player inside Netscape Navigator versions 3 and later. Code Listing 18-7 demonstrates a page in which the Media Player is accessible from both Netscape Navigator and Internet Explorer.

Code Listing 18-7.

The Media Player is loaded by Internet Explorer with the <OBJECT> tag and by Navigator with the <EMBED> tag. Note that the <OBJECT> tag specifies an ID of MPlayer, and the <EMBED> tag uses a NAME of MPlayer. Programming the Media Player in Netscape Navigator is largely the same as in Internet Explorer. Though methods are used in the same way (for example MPlayer.Play() ), there are some differences in how events and properties are accessed. Extensive documentation on the Netscape Plug-in is available from microsoft.com/directx/dxm/help/mmp_sdk/mediaplayerpluginfornetscapenavigator.htm or from the MSDN Online Resource Page; see Media Player in Navigator.