Adding Video with the Media Player Control
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
Internet Explorer 4 originally included the Microsoft ActiveMovie control. This control has been replaced by the Media Player control, which is more flexible than its predecessor.
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:
<OBJECT CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> </OBJECT> |
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.
<HTML> <HEAD> <TITLE>Listing 18-3</TITLE> </HEAD> <BODY> <OBJECT ID="MPlyr" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <PARAM NAME="FileName" VALUE="clouds.avi"> <PARAM NAME="AutoStart" VALUE="true"> </OBJECT> </BODY> </HTML> |
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.
<HTML> <HEAD> <TITLE>Listing 18-4</TITLE> </HEAD> <BODY> <OBJECT ID="MPlyr" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" ALIGN="left" WIDTH="320" HEIGHT="312"> <PARAM NAME="FileName" VALUE="clouds.avi"> <PARAM NAME="AutoStart" VALUE="-1"> <PARAM NAME="ShowDisplay" VALUE="-1"> <PARAM NAME="ShowControls" VALUE="-1"> <PARAM NAME="ShowTracker" VALUE="-1"> <PARAM NAME="PlayCount" VALUE="100"> </OBJECT> <INPUT TYPE=button VALUE="Hide Display" onclick="MPlyr.ShowDisplay=false"> <INPUT TYPE=button VALUE="Show Display" onclick="MPlyr.ShowDisplay=true"> <BR><BR> <INPUT TYPE=button VALUE="Show/Hide Controls" onclick="MPlyr.ShowControls=(MPlyr.ShowControls==true?false:true)"> <INPUT TYPE=button VALUE="Show/Hide Tracker" onclick="MPlyr.ShowTracker=(MPlyr.ShowTracker==true?false:true)"> <BR><BR> <INPUT TYPE=button VALUE="Play" onclick="MPlyr.Play()"> <INPUT TYPE=button VALUE="Stop" onclick="MPlyr.Stop()"> <INPUT TYPE=button VALUE="Pause" onclick="MPlyr.Pause()"> </BODY> </HTML> |
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
| Property | Description |
|---|---|
| AnimationAtStart | Controls whether Media Player displays an animation while the content is being downloaded. (true/false) |
| AutoRewind | Controls whether Media Player automatically returns to the beginning of the selection when it reaches the end of the selection. (true/false) |
| AutoStart | Controls whether Media Player automatically starts playing the multimedia stream. (true/false) |
| Balance | Controls the left/right stereo balance of any audio. Values range from _10,000 to 10,000, with 0 being perfectly balanced. |
| Bandwidth | Contains the bandwidth of the current streaming media being played in bits per second. Read only. |
| BufferingCount | Indicates how many times the clip was buffered during playback. Read only. |
| BufferingProgress | Indicates the percentage of buffering completed. Read only. |
| BufferingTime | Indicates how much time will be allotted for buffering. Read only. |
| ClickToPlay | Controls whether clicking on the control toggles playback and pausing. (true/false) |
| CurrentPosition | Specifies the current position of the player in the multimedia file, in seconds. |
| ConnectionSpeed | Indicates the connection speed specified by the user during setup of the Media Player. Read only. |
| DisplayBackColor | Controls the display panel's background color. |
| DisplayForeColor | Controls the color of the text in the display panel's foreground. |
| DisplayMode | Controls whether the display panel shows the current position of the player in the media file in seconds (0) or frames (1). |
| DisplaySize | Controls the size of the video window. 0 is same as source, 1 halves the dimensions, 2 doubles them, 3 makes the video full screen, 4 allows custom sizing, 5 makes it 1/16th the screen size, 6 makes it 1/4 the screen size, and 7 makes it 1/2 the screen size. |
| Duration | Indicates the clip's playing time. Read only. |
| EnableContextMenu | Controls whether the right-click menu for the Media Player object is functional. (true/false) |
| ErrorCode | Contains the current error code, if any. Read only. |
| ErrorDescription | Contains a textual description of the current error, if any. Read only. |
| FileName | Specifies the name of the multimedia file to be played. |
| HasError | Indicates whether there is currently an error. (true/false) Read only. |
| ImageSourceHeight | Contains the height of the source media. Read only. |
| ImageSourceWidth | Contains the width of the source media. Read only. |
| LostPackets | Indicates the number of packets lost during playback of the current streaming media. Read only. |
| Mute | Controls whether sound will be played. (true/false) |
| PlayCount | Controls the number of times the file is repeated. A value of 0 repeats the file forever. |
| PlayState | Contains information about the current state of the player. 0 means the player is stopped, 1 paused, 2 playing, 3 waiting for stream to begin, 4 scanning forward, 5 scanning in reverse, 6 skipping to next marker, 7 skipping to previous marker, 8 the stream is not open. Read only. |
| Rate | A multiplier that controls the rate at which the media is played. A value of 1 is full-speed, a value of .75 would be three-quarters speed, and so on |
| ReadyState | Indicates the state of readiness of the Media Player control, based on how much of the media file has loaded. A value of 1 means that the FileName property hasn't even been initialized yet, 0 that the file is loading, 3 that the file is still loading but that there is enough to begin playing the files, and 4 that the file has been fully downloaded. The Run method cannot be called to play a movie unless ReadyState equals either 3 or 4. |
| SelectionEnd | Controls where Media Player should stop playing the file. Expressed in seconds, relative to the beginning of the file. |
| SelectionStart | Controls where Media Player should start playing the file. Expressed in seconds, relative to the beginning of the file. |
| ShowControls | Controls whether the Controls Bar is shown. (true/false) |
| ShowDisplay | Controls whether the Display panel is shown. (true/false) |
| ShowGotoBar | Controls whether the Goto Bar (containing any markers in the stream) is shown. (true/false) |
| ShowTracker | Controls whether the Track Bar is shown. (true/false) |
| SourceLink | Contains the path to the clip being played. Read only. |
| StreamCount | Contains the number of streams in the file. Read Only. |
| TransparentAtStart | Controls whether Media Player is transparent when media is not playing. (true/false) |
| Volume | Controls the volume. Ranges from -10000 (silence) to 0 (full volume). |
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.
<HTML> <HEAD> <TITLE>Listing 18-5</TITLE> <SCRIPT FOR="window" EVENT="onload" LANGUAGE="JavaScript"> if(MPlyr.IsSoundCardEnabled()==true){MPlyr.Play()} else { alert("No sound capability available. Click OK to continue.") } </SCRIPT> </HEAD> <BODY> <OBJECT ID="MPlyr" WIDTH=0 HEIGHT=0 CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <PARAM NAME="FileName" VALUE="music.wav"> </OBJECT> This page plays background audio if the computer is able to play sound, and warns the user if the computer is not. </BODY> </HTML> |
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.
<HTML> <HEAD> <TITLE>Listing 18-6</TITLE> <SCRIPT LANGUAGE="JavaScript"> //this function toggles a sound layer function jToggleSnd(WhichSnd, WhichBtn, strText){ if (WhichSnd.PlayState=="2"){ WhichSnd.Pause() WhichBtn.value=("Turn "+strText+" On") } else{ WhichSnd.Play() WhichBtn.value=("Turn "+strText+" Off") } } </SCRIPT> </HEAD> <BODY> <!-- this is the control that plays the music --> <OBJECT ID="MPMusic" WIDTH=0 HEIGHT=0 CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <PARAM NAME="FileName" VALUE="music.wav"> <PARAM NAME="AutoStart" VALUE="1"> <PARAM NAME="PlayCount" VALUE="0"> </OBJECT> <!-- this is the control that plays the voice --> <OBJECT ID="MPVoice" WIDTH=0 HEIGHT=0 CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <PARAM NAME="FileName" VALUE="voice.wav"> <PARAM NAME="AutoStart" VALUE="1"> <PARAM NAME="PlayCount" VALUE="0"> </OBJECT> <H3>Layering sound files with the Media Player control</H3><P> <INPUT TYPE=button ID=voiceBtn VALUE="Turn Voice Off" onclick="jToggleSnd(MPVoice, this, `Voice')"> <INPUT TYPE=button ID=musicBtn VALUE="Turn Music Off" onclick="jToggleSnd(MPMusic, this, `Music')"> <P> <INPUT TYPE=button VALUE="Reduce Voice Volume" onclick="if (MPVoice.volume > -9500){MPVoice.volume-=500}"> <INPUT TYPE=button VALUE="Increase Voice Volume" onclick="if (MPVoice.volume < -500){MPVoice.volume+=500}"> <BR> <INPUT TYPE=button VALUE="Reduce Music Volume" onclick="if (MPMusic.volume > -9500){MPMusic.volume-=500}"> <INPUT TYPE=button VALUE="Increase Music Volume" onclick="if (MPMusic.volume < -500){MPMusic.volume+=500}"> </BODY> </HTML> |
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
At this point, the Media Player does not support mixing multiple audio streams in Microsoft Windows NT 4. No script errors should result from Listing 18-6 in Windows NT, but only one stream will be audible.
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.
<HTML> <HEAD> <TITLE>Listing 18-7</TITLE> </HEAD> <BODY> <OBJECT ID="MPlayer" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" [must be part of previous line] STANDBY="Loading Microsoft® Windows® Media Player components..." TYPE="application/x-oleobject"> <PARAM NAME="FileName" VALUE="clouds.avi"> <PARAM NAME="AutoStart" VALUE="true"> <EMBED NAME="MPlayer" TYPE="application/x-mplayer2" PLUGINSPAGE = "http://www.microsoft.com/Windows/Downloads/ Contents/Products/MediaPlayer/" [must be part of previous line] SRC="clouds.avi"> </EMBED> </OBJECT> </BODY> </HTML> |
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.
EAN: 2147483647
Pages: 128