A Streaming Media JukeBox - Part III: Browser-Independent: Controlling the Player

A Streaming Media JukeBox - Part III: Browser-Independent

Controlling the Player

The set of the ActiveX control's properties, methods, and event handlers is very similar to the plugin's. The names of the methods and events are identical. The properties are different though. While you can set and get the ActiveX control's properties as they are, you have to use the plugin's set and get methods to set and get, respectively, the plugin's properties. Let's take the ActiveX control's fileName property. You can set it in the ActiveX control as follows:

document.mediaPlayer.fileName = url;

You can get it simply by referring to document.mediaPlayer.fileName. In the plugin Media Player, you can set it as follows:

document.mediaPlayer.SetFileName(url);

and get it:

document.mediaPlayer.GetFileName();

To streamline the integration between the ActiveX control and plugin conventions, we chose to write our own functions for getting and setting properties. In this way, the difference between the browsers is reflected only inside our functions, leaving the overall script quite generic and neat. For example, let's examine the function that sets the media file name, setFileName():

function setFileName(url) {
  if (activeX)
    document.mediaPlayer.fileName = url
  else
    document.mediaPlayer.SetFileName(url);
}

Now, let's examine a get function. Here is the function that gets the showControls flag:

function getShowControls() {
  if (activeX)
    return document.mediaPlayer.showControls;
  else
    return document.mediaPlayer.GetShowControls();
}

The rest of the functions can be found in the listings of the script. Refer to our previous two installments for explanation on the buttons and the selection list at the bottom of the Media Control display. The activeX variable is new to the current script. It is set to true when the browser is Internet Explorer, version 4.0 and up. Here is the section of the code that detects the browser type and version, as well as the operating system identity:

function bName() {
  if (navigator.appName == "Microsoft Internet Explorer")
    return 1;
  if (navigator.appName == "Netscape")
    return 2;
  return 0;
}
function bVer() {
  // return version number (e.g., 4.03)
  return parseFloat(navigator.appVersion)
}
var nameCode = bName();
var versionCode = bVer();
var mac = (navigator.userAgent.indexOf("Mac")!=-1);
var activeX = (nameCode == 1 && versionCode >= 4.0) ? true : false; 

Produced by Yehuda Shiran and Tomer Shiran

Created: December 6, 1999
Revised: December 7, 1999

URL: https://www.webreference.com/js/column53/control.html