SBN Samples-Captioning using an HTML TextArea (JavaScript)

	NetShow Services Captioning using an HTML TextArea (JavaScript)

		Demo

Description

GOAL: Change the text in an HTML TextArea with events streamed from a Windows NT Server running NetShow Services. This is done by creating an .ASF file that contains script events referring to a JavaScript function, which then updates the value of the HTML textbox. This demo uses different procedures for Netscape and Internet Explorer.

CODE TO PUT IN YOUR HTML:

First, you will need to include your All-Browser Friendly code in the Web page. This code will include an ActiveX control for Internet Explorer and a plug-in for Netscape Navigator. The small piece of JavaScript code that you add will load a Java Applet that will help Netscape to receive script events.

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>

The next step is to enable the browser to receive the Script Events. Internet Explorer is ready to start receiving events, but Netscape Navigator still needs a few more procedures. The following function will start an applet that will be watching for the Script Events from the plug-in.

function RegisterEventObservers(){ 
if(navigator.appName == "Netscape"){
var plugin = document.MediaPlayer;
    document.appObs.setByProxyDSScriptCommandObserver(plugin, true); 
}
}

This code should be executed when the page loads. You will need to add an onLoad event to the <Body> tag in order to get this code to execute. Here is an example of the onLoad event.

OnLoad= "RegisterEventsObservers()"

Now that both browsers can receive the Script Commands Event, you will need to include code that will pick up these events and assign them to variables that can then be used in JavaScript code. Again, you will have to use a different procedure for the plug-in and the ActiveX control. The following is the code that will interpret events for the plug-in. This code has two variables (ScType and ScParam). We use the first variable to assign the type of Script Command Event and the second variable to assign a parameter of that event. The if statement says that if the Type is equal to "Textbox" then assign the value of the textbox to ScParam. A function should be added in the JavaScript code that will monitor that applet for events.

function OnDSScriptCommandEvt (scType, scParam){
if (scType == "Textbox") { document.myform.textbox1.value= scParam}
}

You should also add an additional area of JavaScript code outside the JavaScript code that you already have. This code will specifically interpret events coming from the ActiveX control. Again, both the plug-in and the ActiveX control use basically the same procedures and variables.

<script LANGUAGE="JavaScript" FOR="MediaPlayer" EVENT="ScriptCommand(scType,scParam)">
<!--
if (navigator.appName == 'Microsoft Internet Explorer') {
  if (scType == 'Textbox') { document.myform.textbox1.value= (scParam)}
            }
//-->
</script>

Time Event Parameter

00:00.10.0 Textbox This script event just happened.