Description: Goal- To create custom script command events, used to create a multimedia environment with dynamic captioning and images synchronized to an ASF stream.
ASF's true power lies in its ability to send script commands timed within an ASF stream. These commands are not handled intrinsically by the Media Player, but are instead handled by the underlying JavaScript environment in both Netscape Navigator and Microsoft Internet Explorer. Utilizing these commands, it becomes very easy to create rich, dynamic multimedia.
Using script commands in an ASF stream, it becomes possible to command the browser to do just about anything that the browser supports. It becomes possible, for instance, for the Media Player control to interact with DHTML, Java applets, plug-ins, and more.
More Details
A script command is just like any other Media Player event, except that it allows you to send whatever kinds of data you want to the browser. The browser receives the ScriptCommand event, along with two parameters. The first parameter is used to determine the type of script command that is being sent. Then your JavaScript can perform whatever functionality you program in, using the script command's second parameter as data. For example, you might create a script command event called "swapImage." Through code handled by the ScriptCommand event, you could change the src attribute of an
![]()
tag based on the data held in the script command's second parameter.
Code to Include
We'll start with our regular cross-browser code, adding the appObs proxy applet for Netscape Navigator:
<![CDATA[<object id="MediaPlayer1" width="160" height="120" 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="AutoStart" value="False"><param name="FileName" value="http://webserver/path/your-file.asx"><param name="ShowControls" value="False"><param name="ShowStatusBar" value="False"><embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="http://webserver/path/your-file.asx" name="MediaPlayer1" width="160" height="120" autostart="0" showcontrols="0"></embed></object>
<script language="JavaScript">
<!--
if ( navigator.appName == "Netscape" )
{
//-- This next line ensures that any plugins just installed are updated in
//-- the Browser without quitting the browser.
navigator.plugins.refresh();
// 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>
Next, we'll add some areas in which we can perform Dynamic HTML (DHTML) operations. We'll use an <img class="old-inline-image"> tag, that we'll use to swap images. We'll also use a set of tags that will combine a <layer> and a <div>. This is necessary because of the differences between the DHTML models in Netscape Navigator and Internet Explorer.
<img name="dynImage" id="dynImage" vspace="20" hspace="50" src="/article/windows-development/white.gif" class="old-inline-image"><layer id="contentNav" top="20" left="190" width="240"><nolayer><div id="contentIE" class="content">
</div>
</nolayer></layer>
For aesthetic reasons, we'll add <style> at the top of the page (inside the <HEAD> tag.)
<STYLE>
#content {font:12pt Arial; font-weight:bold}
.content{position:absolute; top:20; left:190; font:12pt Arial; width:240; font-weight:bold}
</style>
You'll notice that we're using both "#content" and ".content" CSS classes. This, again, has to do with syntax differences between Netscape Navigator and Internet Explorer.
As before, we'll be using a function called by the onload event of the browser.
Now it is time to actually write the JavaScript. Place the following code at the very top of your <script>
function advagg_mod_1() {
// Count how many times this function is called.
advagg_mod_1.count = ++advagg_mod_1.count || 1;
try {
if (advagg_mod_1.count <= 40) {
block:
var bControl;
var imgArr = new Array();
imgArr[0] = new Image();
imgArr[1] = new Image();
imgArr[2] = new Image();
imgArr[0].src = "white.gif";
imgArr[1].src = "image1.gif";
imgArr[2].src = "image2.gif";
This code preloads 3 images, which we'll call in our ASF stream. It also initializes a variable that we'll be using to determine if the user is using an ActiveX control or a plug-in.
Next we'll add the loader() function that we referenced in the tag. This code resides in the main <SCRIPT> block.
function loader(){
if ((navigator.userAgent.indexOf('IE') > -1) andand (navigator.platform == "Win32")) {
bControl = true;
} else {
var plugIn = document.MediaPlayer1;
bControl = false;
// listen for ScriptCommand Event
document.appObs.setByProxyDSScriptCommandObserver(plugIn,true);
}
document.MediaPlayer1.Play();
}
The following code, which also resides in the main <SCRIPT> block, will handle the script command callback method for plug-in browsers.
function OnDSScriptCommandEvt (bstrType, bstrParam){
if (bstrType.toLowerCase() == "caption") {
var sCommand;
sCommand = "document.contentNav.document.writeln(\"";
sCommand = sCommand + bstrParam;
sCommand = sCommand + "\");document.contentNav.document.close(); ";
timerID = setTimeout(sCommand,0);
} else if (bstrType.toLowerCase() == "swapimage") {
timerID = setTimeout("document.dynImage.src = imgArr[" + bstrParam + "].src",0);
}
}
In the code above, the first thing that happens is a check for the first parameter of the script command event. If this parameter (bstrType) is recognized, the code performs appropriate operations, based on the value of this parameter. If not, the script command event is ignored. You'll also notice that the second paramter (bstrParam) is used for the actual data for each script type.
The code below, which will set up the event handling in Internet Explorer, performs the same operations as the plug-in code above. The only real difference lies in how the DHTML is performed.
<SCRIPT FOR="MediaPlayer1" EVENT="ScriptCommand(bstrType, bstrParam)" LANGUAGE="Jscript">
if (bstrType.toLowerCase() == "caption") {
document.all.contentIE.innerHTML = bstrParam;
} else if (bstrType.toLowerCase() == "swapimage") {
document.dynImage.src = imgArr[bstrParam].src;
}
// Set this to 100 so that this function only runs once.
advagg_mod_1.count = 100;
}
}
catch(e) {
if (advagg_mod_1.count >= 40) {
// Throw the exception if this still fails after running 40 times.
throw e;
}
else {
// Try again in 250 ms.
window.setTimeout(advagg_mod_1, 250);
}
}
}
function advagg_mod_1_check() {
if (window.jQuery && window.Drupal && window.Drupal.settings) {
advagg_mod_1();
}
else {
window.setTimeout(advagg_mod_1_check, 250);
}
}
advagg_mod_1_check();</script>
Since the Script Command event is embedded in the ASF file itself, we'll need a way to add the script commands inside the ASF file. We can do this using the ASF Indexer tool (one part of the Windows Media tools package).
First, open up the ASF Indexer -- the default location of this tool is Start->Programs->NetShow Services->ASF Indexer. Once it is running, select File->Open. This will bring up a dialog box which will allow you to specify a piece of ASF content. Click the "Edit Script Commands" button. This will bring up the "Script Commands" dialog box. Click "New." Choose a time for your script command (in hours:minutes:seconds.tenths format). Next change the name of the script command to your own custom type, and change the parameter field to specify the type of data your command will send.
Your ASF Indexer should look similar to the image below.
Browser/Platform Compatibility
This code will work with Internet Explorer 4+ and Netscape Navigator 4+ on the Win32 platform.
<p>
<a href="http://msdn.microsoft.com/downloads/samples/internet/default.asp?url=/downloads/samples/internet/imedia/netshow/scriptcommands/default.asp">Complete Article</a></p>
</div></layer>]]>
