JavaScript and Embedded Objects - Interacting with a Specific Plug-In (Page 11 of 15 )
Nearly everything that was true of applet interaction remains true for plug-ins as well. Applets are accessed through the Document object, using the applet’s name or id attribute. Similarly, the plug-in handling data embedded in the page is accessed by the name attribute of the <embed> tag that includes it. As with applets, you need to be careful that you do not attempt to access embedded data before it is finished loading. The same technique of using the onload handler of the Document to set a global flag indicating load completion is often used. However, one major difference between applets and plug-ins is that as far as the DOM specification is concerned, the <embed> tag doesn’t exist, nor do plug-ins. Despite the fact that their use, particularly in the form of Flash, is so widespread, the specification chooses not to acknowledge their dominance and try to standardize their use.
To illustrate interaction with plug-ins, we show a simple example using a Macromedia Flash file. The first thing to note is that there are two plug-in names corresponding to Flash players capable of LiveConnect interaction. They are “Shockwave Flash” and “Shockwave Flash 2.0.” Second, consulting Macromedia’s documentation reveals that the <embed> tag should have its swliveconnect attribute set to true(though it does not appear to be required for this example) if you wish to use JavaScript to call into the Flash player.
You can find a list of methods supported by the Flash player at Macromedia’s Web site (for example, at http://www.macromedia.com/support/flash/publishexport/
scriptingwithflash/). The methods we will use in our simple example are GotoFrame(), IsPlaying(), Play(), Rewind(), StopPlay(), TotalFrames(), and Zoom(). The following example controls a simple Flash file extolling the wonders of JavaScript.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Flash control example (Netscape and Mozilla only)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
var pluginReady = false;
var pluginAvailable = false;
if (document.all) alert("Demo for netscape only");
function detectPlugin()
{
// if the appropriate plugin exists and is configured
// then it is ok to interact with the plugin
if (navigator.plugins &&
((navigator.plugins["Shockwave Flash"] &&
navigator.plugins["Shockwave Flash"]["application/x-shockwave-flash"])
||
(navigator.plugins["Shockwave Flash 2.0"] &&
navigator.plugins["Shockwave Flash 2.0"]["application/x-shockwave-flash"]))
)
pluginAvailable = true;
}
function changeFrame(i)
{
if (!pluginReady || !pluginAvailable)
return;
if (i>=0 && i<document.demo.TotalFrames())
// function expects an integer, not a string!
document.demo.GotoFrame(parseInt(i));
}
function play()
{
if (!pluginReady || !pluginAvailable)
return;
if (!document.demo.IsPlaying())
document.demo.Play();
}
function stop()
{
if (!pluginReady || !pluginAvailable)
return;
if (document.demo.IsPlaying())
document.demo.StopPlay();
}
function rewind()
{
if (!pluginReady || !pluginAvailable)
return;
if (document.demo.IsPlaying())
document.demo.StopPlay();
document.demo.Rewind();
}
function zoom(percent)
{
if (!pluginReady || !pluginAvailable)
return;
if (percent > 0)
document.demo.Zoom(parseInt(percent));
// method expects an integer
}
//-->
</script>
</head>
<body onload="pluginReady=true; detectPlugin();">
<!-- Note: embed tag will not validate against -->
<embed id="demo" name="demo" src="http://demos.javascriptref.com/jscript.swf" width="318" height="300" play="false" loop="false" pluginspage="http://www.macromedia.com/go/getflashplayer" swliveconnect="true"></embed>
<form name="controlform" id="controlform" action="#" method="get">
<input type="button" value="Start" onclick="play();" />
<input type="button" value="Stop" onclick="stop();" />
<input type="button" value="Rewind" onclick="rewind();" /><br />
<input type="text" name="whichframe" id="whichframe" />
<input type="button" value="Change Frame" onclick="changeFrame(controlform.whichframe.value);" /><br />
<input type="text" name="zoomvalue" id="zoomvalue" />
<input type="button" value="Change Zoom"
onclick="zoom(controlform.zoomvalue.value);" />
(greater than 100 to zoom out, less than 100 to zoom in)<br />
</form>
</body>
</html>
The example—stopped in the middle of playback and zoomed in—is shown in Figure 18-6.
FIGURE 18-6 The scriptable Flash plug-in lets us zoom in on the Flash file.
There exist far more powerful capabilities than the previous example demonstrates. One particularly useful aspect of Flash is that embedded files can issue commands using FSCommand() that can be “caught” with JavaScript by defining an appropriately named function. Whenever an embedded Flash file in a LiveConnect-enabled browser issues an FSCommand(), the Flash file crosses over into browser territory to invoke the name_doFSCommand() method if one exists. The name portion of name_doFSCommand() corresponds to the name or id of the element in which the object is defined. In the previous example, the Flash file would look for demo_doFSCommand() because the file was included in an <embed> with name equal to “demo.” Common applications include alerting the script when the data has completed loading and keeping scripts apprised of the playback status of video or audio. As with other more advanced capabilities, details about these kinds of callback functions can be obtained from the plug-in vendors.
 This chapter is from JavaScript: The Complete Reference, second edition, by Thomas Powell and Fritz Schneider, McGraw-Hill/Osborne, ISBN: 0072253576). Check it out at your favorite bookstore today.
Buy this book now. |
Next: ActiveX >>
More JavaScript Articles
More By McGraw-Hill/Osborne
/ 43 
