JavaScript Textbox - How To

 

Streaming Text to Text Boxes

GOAL: Insert text into the ASF stream that is displayed on the HTML page next to the Microsoft® Windows® Media Player control at specific times.

To do this, we insert events and parameters into the ASF stream, and target the TextBox <INPUT> tag to receive and display the text at specified times.

CODE TO PUT IN YOUR HTML: This subroutine is used to receive and interpret the events and parameters being sent from the ASF stream. NSPlay1 refers to the Windows Media Player control. This segment of code should come after the <TITLE> tag in your HTML.

<SCRIPT LANGUAGE="JavaScript" FOR="NSPlay1" EVENT="ScriptCommand(bstrtype,bstrparam)">

if(navigator.appName == "Microsoft Internet Explorer"){

document.status= (bstrtype)+":"+(bstrparam)
if (bstrtype == "Textbox"){

document.myform.Textbox1.value= (bstrparam)

}

}

</script>

<SCRIPT LANGUAGE="JavaScript">

function RegisterEventObservers(){

if(navigator.appName == "Netscape"){

var plugin = document.NSPlay1;
document.appObs.setByProxyDSScriptCommandObserver(plugin, true);

}

}
function OnDSScriptCommandEvt (scType, scParam)

{

document.status= (scType)+":"+(scParam)
if (scType == "Textbox"){

document.myform.Textbox1.value= (scParam)
}

}

</script>

This is the script that interprets the events being sent down the stream. You will also need to include the ASF in the page, using the Windows Media Player <OBJECT> tag in the body of your HTML page:

<!-- GENERIC ALL BROWSER FRIENDLY HTML FOR NETSHOW 3.0 SERVICES -->

<script language="JavaScript">
<!--
if ( navigator.appName == "Netscape" )
{
// We don't need the APPLET within IE, and APPLET is treated as an implied
// end to the OBJECT tag by the IE HTML parser.
// ***Please note that if you do not need to script events, you can
//safely remove the next two lines
document.write("\x3C" + "applet MAYSCRIPT Code=NPDS.npDSEvtObsProxy.class" )
document.writeln(" width=5 height=5 name=appObs\x3E \x3C/applet\x3E")

}
//-->
</script>
<OBJECT ID="NSPlay1" WIDTH=160 HEIGHT=112 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://servername/path/filename.asx">
<PARAM NAME="AutoStart" VALUE="1">
<PARAM NAME="ShowControls" VALUE="0">
<!--NETSCAPE PLUG-IN STARTS HERE-->
<Embed type="application/x-mplayer2"

pluginspage="http://www.microsoft.com/Windows/
Downloads/Contents/Products/MediaPlayer/"
name=Nsplay1
src="http://servername/path/filename.asx"
ShowControls=0
ShowDisplay=0
ShowStatusBar=0
width=320
height=270>

</embed>

</OBJECT>

Next, you will need to include the <INPUT> tag for the text box:

<FORM NAME = "myform">

<INPUT TYPE="Textbox" NAME="Textbox1" VALUE="This is the text before the script command" SIZE="50">

</FORM>

These three elements define what to do with the TextBox events being sent down the stream, insert the Windows Media Player control on the page, and provide the place to put the text when it's received in the stream. The NSPlay1 control receives events (bstrtype) and parameters (bstrparam) and sends them to the JavaScript code, which sends the events (bstrtype) and parameters (bstrparam) to the Textbox <INPUT> tag so that it can display the changed text.

Remember that this won't work unless your ASF stream contains these events and parameters.

EVENTS AND PARAMETERS TO PUT IN YOUR ASF STREAM: The preceding subroutine will wait for events and parameters from the ASF stream to be sent to it before it will do anything. In this example, here is the event and the parameter we used:

Once the event named Textbox is received, the JavaScript function will plug The Script Event just changed into the Textbox <INPUT> tag, which will display it on the page. If you insert multiple Textbox events and parameters into the stream, the text box will change multiple times as the ASF plays.