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:
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:
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
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.