SBN Samples-Using Buttons to Control the NetShow Services Stream

	NetShow Services Using Buttons to Control the NetShow Services Stream

		Demo

Description

GOAL: Change the parameters of the Windows Media Player control on the fly by having the user press a button. In this example, the user can change the type of control used, the size of the control, and whether or not the control plays, pauses, or stops by simply pressing the appropriate HTML button. This is easy to accomplish because it's all done through HTML and script; no streamed events and parameters are used.

This is done by embedding the Windows Media Player control (MediaPlayer) into your HTML page, and then sending commands from the <INPUT> tag to change the parameters in the Windows Media Player control. The parameters are changed in the OnClick area of the <INPUT> tag. You can use this same technique to change other parameters of the Media Player control by using document.myform.mediaplayer followed by a period and then the name of the parameter you wish to change (for example, ShowControls or DisplaySize used below).

CODE TO PUT IN YOUR HTML:

First, you'll want to add the following <OBJECT> tag to embed the Windows Media Player into your HTML Page. Add the code below to your Web page between the <BODY> and </BODY> tags. Replace "your-file.asx" with the path of a file on your local hard drive or a file on a Windows NT Server running NetShow Services.

<OBJECT ID="MediaPlayer"  
  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="http://server/path/your-file.asx">
     <PARAM NAME="AnimationatStart" VALUE="true">
     <PARAM NAME="TransparentatStart" VALUE="true">
     <PARAM NAME="AutoStart" VALUE="true">
     <PARAM NAME="ShowControls" VALUE="1">

     <Embed type="application/x-mplayer2"
          pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/"
          src="http://server/path/your-file.asx"
          Name=MediaPlayer
          ShowControls=1
          Width=360
          Height=180
     >
     </embed>
</OBJECT>

<BR><BR>
    <a href="http://servername/path/your-file.asx">
    Start the streaming media presentation in the stand-alone player.</a>

Add the following JavaScript code after the </TITLE> tag. This will reload your Netscape plug-in so it will play better.

<script language="JavaScript">
<!--
    if ( navigator.appName == "Netscape" ) 
    {
        navigator.plugins.refresh();
        document.write("\x3C" + "applet MAYSCRIPT Code=NPDS.npDSEvtObsProxy.class" )
        document.writeln(" width=5 height=5 name=appObs\x3E \x3C/applet\x3E")
     }
//-->
</script>

Next, you'll want to add the HTML buttons that change the parameter of the control when pushed:

Parameter Affected Change To HTML Code

ShowControls False (no controls) <INPUT TYPE="button" VALUE="No Controls" NAME="NoControls" ONCLICK="ShowControls(False)" style="font-family:courier">

ShowControls True (full controls) <INPUT TYPE="button" VALUE="Full Controls" NAME="Full Controls" ONCLICK="ShowControls(true)" style="font-family:courier">

Display Size 1 (small display size) <INPUT TYPE=button VALUE="Small" NAME="Small" ONCLICK="DisplaySize(1)" style="font-family:courier">

Display Size 0 (normal display size) <INPUT TYPE=button VALUE="Normal" NAME="Normal" ONCLICK="DisplaySize=(0)">

Display Size 2 (Large Display Size ) <INPUT TYPE=button VALUE="Large" NAME="Large" ONCLICK="DisplaySize(2)" style="font-family:courier">

Parameter Affected	Change To	HTML Code
ShowControls	False (no controls)	<INPUT TYPE="button" VALUE="No Controls" NAME="NoControls" ONCLICK="ShowControls(False)" style="font-family:courier">
ShowControls	True (full controls)	<INPUT TYPE="button" VALUE="Full Controls" NAME="Full Controls" ONCLICK="ShowControls(true)" style="font-family:courier">
Display Size	1 (small display size)	<INPUT TYPE=button VALUE="Small" NAME="Small" ONCLICK="DisplaySize(1)" style="font-family:courier">
Display Size	0 (normal display size)	<INPUT TYPE=button VALUE="Normal" NAME="Normal" ONCLICK="DisplaySize=(0)">
Display Size	2 (Large Display Size )	<INPUT TYPE=button VALUE="Large" NAME="Large" ONCLICK="DisplaySize(2)" style="font-family:courier">

Always put your buttons inside <form> so that all browsers will display them.
Use a style tag inside the buttons. Each button should contain the same number of spaces so that they will appear a uniform width.
The OnClick event sends the program to one of the following functions. The OnClick tag will not do anything or return an error if you do not include a corresponding function.

This code tells the Windows Media Player control to change when the user clicks on one of these buttons.

SHOWCONTROLS FUNCTION

The ShowControls and the DisplaySize functions both work in exactly the same way. Because of this, we will only include code for the ShowContols function. This function uses an if statement to check which browser the user is viewing the document with. If the user is using Netscape Navigator, the Windows Media Player plug-in will be automatically used. If the user is using Internet Explorer, the Windows Media Player ActiveX control will be used. It is important to make this distinction. Even though the ActiveX control and the plug-in operate in similar ways, you have to use slightly different lines of code to control them. Copy and paste the code below into the JavaScript area of your Web page after the </Title> tag and before the <BODY> tag.

function ShowControls (setting)
{
    if (navigator.appName == "Netscape")
      {document.MediaPlayer.SetShowControls(setting)}
    else
                   {document.MediaPlayer.ShowControls = setting}

}   /* end ShowControls() */

PLAY, PAUSE, AND STOP BUTTONS

The Play, Pause, and Stop buttons are very simple to create. We are not using any additional functions for these buttons. You do not need to detect which browser the user is using in order to successfully use these buttons. The ActiveX control will automatically load for Internet Explorer and the plug-in will automatically load for Netscape Navigator. Be sure to name both the plug-in and the ActiveX control "MediaPlayer". All you need to do is type MediaPlayer. and then the name of the event that you would like to send to the ActiveX control or plug-in. This can all be included inside the <Input> HTML tag that creates the button.

Parameter Affected	HTML code used
Play	<INPUT TYPE="Button" VALUE="Play" NAME="Play" ONCLICK="MediaPlayer.Play()" style="font-family:courier">
Pause	<INPUT TYPE="Button" VALUE="Pause" NAME="Pause" ONCLICK="MediaPlayer.Pause()" style="font-family:courier">
Stop	<INPUT TYPE="Button" value="Stop" NAME="Stop" Onclick="MediaPlayer.stop()" style="font-family:courier">

TOGGLE BETWEEN PLAY AND STOP

The Play/Pause button is the most complicated button. It again uses a separate function to interpret what the button will do. This function is the PlayPauseClick function. The PlayPauseClick function will first check the state that the browser is currently in. The function does this in a different way for the Windows Media Player ActiveX control and the Windows Media Player plug-in. This is why the code first includes an if statement which will find out which browser the user is viewing the Web page with. If the user is using Netscape Navigator, it uses document.MediaPlayer.getPlayState(), whereas if they are using Internet Explorer, it uses document.MediaPlayer.PlayState. If PlayState is 0 (the Windows Media Player is stopped), then the Play event is activated and the text in the button is changed to "Pause". If the PlayState is equal to 1 (the player is paused), then the Play event is fired and the text in the button is changed to "Pause". If the PlayState is equal to 2 (the Windows Media Player is playing), then the Pause event is fired and the text in the button is changed to "Play".

function PlayPauseClick ()
{
    var state;
    
    if (navigator.appName == "Netscape")
        state = document.MediaPlayer.GetPlayState();
    else
        state = document.MediaPlayer.PlayState;

    if (state == 0) {
        document.MediaPlayer.Play();
         document.myform.PlayPause.value = "Pause";
    } else if (state == 1) {
        document.MediaPlayer.Play();
        document.myform.PlayPause.value = "Pause";
    } else if (state == 2) {
        document.MediaPlayer.Pause();
        document.myform.PlayPause.value = " Play";
    }

}   /* end PlayPauseClick() */

Parameter Affected	HTML code used
Toggle Between Play and Pause	<INPUT TYPE="Button" VALUE="Pause" NAME="PlayPause" ONCLICK="PlayPauseClick()" style="font-family:courier">