The Windows Media Player's Properties

The Windows Media Player supports several methods and properties. We built our demo jukebox to show their usage model. We have several buttons on our demo: Pause/Play, Show Controls/Hide Controls, Small, Normal, and Large. Here is the HTML form:

<FORM NAME="playerCtrl">
<INPUT TYPE="button" VALUE=" Pause " NAME="playOrPause"
 onclick="handlePlayOrPauseClick()" STYLE="font-family:courier">
  // (The two lines above should be joined as one line.
  // They have been split for formatting purposes.)
<INPUT TYPE="button" VALUE=" Hide Controls " NAME="controls"
 onclick="handleControlsOnOffClick()" STYLE="font-family:courier"><BR>
  // (The two lines above should be joined as one line.
  // They have been split for formatting purposes.)
<INPUT TYPE="button" VALUE=" Small " NAME="small" onClick="changeSize(1)"
 STYLE="font-family:courier">
  // (The two lines above should be joined as one line.
  // They have been split for formatting purposes.)
<INPUT TYPE="button" VALUE=" Normal " NAME="normal" onClick="changeSize(0)"
 STYLE="font-family:courier">
  // (The two lines above should be joined as one line.
  // They have been split for formatting purposes.)
<INPUT TYPE="button" VALUE=" Large  " NAME="large" onClick="changeSize(2)"
 STYLE="font-family:courier">
  // (The two lines above should be joined as one line.
  // They have been split for formatting purposes.)

The top left button is the Pause/Play button. Every click of this button carries out the proper command and switches the button around. The handlePlayOrPauseClick() function is the event handler for this button:

function handlePlayOrPauseClick(){
  var state;
  playerStatus = document.mediaPlayer.playState;
  if (playerStatus == 0) {
    document.mediaPlayer.play();
    document.playerCtrl.playOrPause.value = " Pause ";
  }
  else if (playerStatus == 1) {
    document.mediaPlayer.play();
    document.playerCtrl.playOrPause.value = " Pause ";
  }
  else if (playerStatus == 2) {
    document.mediaPlayer.pause();
    document.playerCtrl.playOrPause.value = " Play  ";
  }

}

The playState property tells the status of the media. It is 6 when the media is loading, 1 when it is in pause position, and 2 if the media is currently playing. When the user clicks the play button, we call the play() method and switch the value of the button to Pause. When the user clicks the Pause button, we call the pause() method and switch the value of the button to Play.

The Show Controls/Hide Controls button is implemented similarly to the Play/Pause button. Here is the function that handles these clicks:

function handleControlsOnOffClick() {
  if (document.mediaPlayer.showControls == true) {
    document.mediaPlayer.showControls = false;
    document.playerCtrl.controls.value = "  Show Controls ";
  }
  else {
    document.mediaPlayer.showControls = true;
    document.playerCtrl.controls.value = "  Hide Controls "
  }
}

This function is straight forward. We switch the showControls property on and off for every click on the Show Controls/Hide Controls button. We also switch the button value accordingly.

Controlling the size of the player's footprint is the simplest of all. The event handler for all three size buttons (Small, Normal, and Large) is common:

function changeSize(newSize) {
  document.mediaPlayer.displaySize = newSize;
}

We assign 0 to the displaySize property when the user clicks the Normal button, 1 if he or she clicks the Small button, and 2 if the user chooses the Large button.