영삼넷IT 강국 = 김영삼 블로그에 오신걸 환영합니다.

Description

Goal: Incorporate buttons in a Web page that control a variety of features of the Windows® Media Player in both Microsoft® Internet Explorer and Netscape Navigator® .

This sample describes how to incorporate advanced buttons for the Windows Media Player into a Web page. These buttons will work in any browser that supports the Windows Media Player Plug-in and JavaScript.

Since Internet Explorer utilizes the ActiveX model for incorporating components into HTML pages and Navigator uses its own plug-in architecture, we must write our code in a way that will work in both environments. The ActiveX model allows properties, methods, and events to be accessed directly through the Document Object Model (DOM -- a fancy term used to describe how elements on a Web page are addressed). The plug-in model only allows for methods to be passed directly to the browser. As such, to write code for both browsers, the code needs to perform a browser check (sometimes called a browser sniff) and run browser-specific code.

More Details

The Windows Media Player has about one hundred properties and over 20 methods. The Media Player methods (Play, Pause, Stop, etc) will work with both the ActiveX control and the plug-in as they stand. Accessing and modifying the properties of the Media Player, however, requires somewhat different scripting syntax between the ActiveX control and the plug-in. For a given property, such as the read-write "FileName" property, plug-in code must access the property using the SetpropertyName and GetpropertyName methods.

The statement MediaPlayer1.FileName = "demo.asf"; for ActiveX browsers is analogous to the following statement for the plug-in: MediaPlayer1.SetFileName("demo.asf");. This code would set the FileName property of the Media Player to "demo.asf".

To get information about a plug-in property, the property must be retrieved by invoking a GetpropertyName Method. For example, the statement var sFileLoc = MediaPlayer1.FileName; for ActiveX browsers is analogous to the following statement for the plug-in: var sFileLoc = MediaPlayer1.GetFileName();.

More examples follow.

Code to Include

We'll start with our generic cross-browser code embedding code. This code will instantiate the Media Player ActiveX control for browsers which support ActiveX, and the Media Player plug-in for browsers that don't:

<OBJECT ID="MediaPlayer1" width=160 height=112 
	classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
	codebase=
	"http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
        standby="Loading Microsoft® Windows® Media Player components..." 
        type="application/x-oleobject">
  <PARAM NAME="FileName" VALUE="mms://windowsmediaserver/path/your-file.asf">
  <PARAM NAME="ShowControls" VALUE="0">
  <EMBED type="application/x-mplayer2" 
	pluginspage = "http://www.microsoft.com/Windows/MediaPlayer/"
	SRC="mms://windowsmediaserver/path/your-file.asf"
	name="MediaPlayer1"
	width=160
	height=112
	ShowControls=0>
  </EMBED>
</OBJECT>

Next, we'll define a form and some buttons:

<FORM NAME="myButtons">
   <INPUT NAME="btnPlay" TYPE="Button" VALUE="Play" onclick="document.MediaPlayer1.Play();">
   <INPUT NAME="btnPause" TYPE="Button" VALUE="Pause" onclick="document.MediaPlayer1.Pause();">
   <INPUT NAME="btnStop" TYPE="Button" VALUE="Stop" onclick="document.MediaPlayer1.Stop();">
  

   <INPUT NAME="btnShowControls" TYPE="Button" VALUE="Show Controls" onclick="showClick()">
   <INPUT NAME="btnHideControls" TYPE="Button" VALUE="Hide Controls" onclick="hideClick()">
  

   <INPUT NAME="btnMute" TYPE="Button" VALUE=" Mute " onclick="muteClick()">
</FORM>

In the code above, all of the buttons make calls through JavaScript. The first three buttons use JavaScript to make calls directly through the Document Object Model (DOM), calling methods of the Media Player.

The rest of the buttons call JavaScript functions, allowing for more advanced scripting, such as accessing Media Player properties for both the ActiveX control and the plug-in.

Now we'll add the JavaScript functions:

<SCRIPT LANGUAGE="JavaScript">
// Browser sniff -- the following code does a very simple browser check and rates the 
//     browser as either Internet Explorer on a Win32 platform or not, so that we 
//     know to use the ActiveX model, or the plug-in Model.
var sBrowser = navigator.userAgent;  
if ((sBrowser.indexOf("IE") > -1) && (navigator.platform == "Win32"))
{
	sBrowser = "IE";
} else {
	sBrowser = "nonIE";
}
// end browser sniff

function showClick() // This function is called by the btnShowControls button.
                     // It sets the ShowControls property of Media Player to true.
{
	if (sBrowser == "IE") {
		document.MediaPlayer1.ShowControls = true;
	} else {
		document.MediaPlayer1.SetShowControls(true);
	}
}

function hideClick() // This function is called by the btnHideControls button.
                     // It sets the ShowControls property of Media Player to false.
{
	if (sBrowser == "IE") {
		document.MediaPlayer1.ShowControls = false;
	} else {
		document.MediaPlayer1.SetShowControls(false);
	}
}

function muteClick() // This function is called by the "Mute" button.
                     // It toggles the state of the Mute property of the Media Player.
{
	var bMuteState;

	if (sBrowser == "IE") {
		bMuteState = document.MediaPlayer1.Mute;
	} else {
		bMuteState = document.MediaPlayer1.GetMute();
	}

	if (bMuteState == true) {
		document.myButtons.btnMute.value="Mute";
		if (sBrowser == "IE") {
			document.MediaPlayer1.Mute = false;
		} else {
			document.MediaPlayer1.SetMute(false);
		}
	} else {
		document.myButtons.btnMute.value="Un-Mute";
		if (sBrowser == "IE") {
			document.MediaPlayer1.Mute = true;
		} else {
			document.MediaPlayer1.SetMute(true);
		}
	}
}

</SCRIPT>

There are three main parts to this script: The browser sniff, the showClick() and hideClick() functions, and the muteClick() function.

The browser sniff is called immediately, before the page is finished loading. It simply grabs the userAgent property of the navigator object. Each browser has its own userAgent string, which can be used to tell the name and version of the browser. Using the intrinsic indexOf() function, we're determining whether or not this is a Win32 Internet Explorer based browser (which then supports ActiveX controls) or not, and storing that information in a global string variable (sBrowser).

The showClick() and hideClick() functions are called by the btnShow and btnHide buttons. They use the browser sniff information (sBrowser) to set the ShowControls property of the browser for both the plug-in and the ActiveX control.

The muteClick() function is the handler for the btnMute button. This is a more advanced button that toggles the mute property of the Media Player between true and false. First, it retrieves the Mute property of the Media Player, and determines whether the property is set to true or false. Then, based on this information, it toggles the state of the Mute property, i.e. if the Mute property is set to true, the function sets it to false, and vice versa. Also, the function resets the value of the button so that the user can tell what the button actually does.

Browser/Platform Compatibility and other Requirements

This code will work with Internet Explorer 4+, and Netscape Navigator 4+ on platforms that support the Windows Media Player plug-in and ActiveX control.

Related Links

• MSDN Online - Windows Media Technologies