Controlling Flash with Javascript

Hi All,

I’m trying to control a Flash video player with external Javascript commands using ‘ExternalInterface.addCallback’ but I’m not having any success. Here is the HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject 2 static publishing example page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
        var flashvars = {};
        var params = {};
        params.swliveconnect = "true";
        params.allowscriptaccess = "true";
        var attributes = {
          id: "vw10_videoPlayer",
          name: "vw10_videoPlayer"
        };

        swfobject.registerObject("vw10_videoPlayer", "9.0.0", "swf/expressInstall.swf", flashvars, params, attributes);
        </script>
<script language="text/javascript">
function getFlashMovieObject(movieName)
{
  if (window.document[movieName]) 
  {
    return window.document[movieName];
  }
  if (navigator.appName.indexOf("Microsoft Internet")==-1)
  {
    if (document.embeds && document.embeds[movieName])
      return document.embeds[movieName]; 
  }
  else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
  {
    return document.getElementById(movieName);
  }
}


function playVid1()
{
    var flashMovie=getFlashMovieObject("vw10_videoPlayer");
    flashMovie.playVideo1();
}
function playVid2()
{
    var flashMovie=getFlashMovieObject("vw10_videoPlayer");
    flashMovie.playVideo2();
}
function playVid3()
{
    var flashMovie=getFlashMovieObject("vw10_videoPlayer");
    flashMovie.playVideo3();
}
function playVid4()
{
    var flashMovie=getFlashMovieObject("vw10_videoPlayer");
    flashMovie.playVideo4();
}
</script>
</head>
<body>
<div>
  <object id="vw10_videoPlayer" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="360">
    <param name="vw10_videoPlayer" value="swf/vw10_videoPlayer.swf" />
    <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="swf/vw10_videoPlayer.swf" width="640" height="360">
                <!--<![endif]-->
    <div>
      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
    </div>
    <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
  </object>
</div>
<div>
  <form name="controller" method="POST">
    <b><font color="#000000">JavaScript Controller<br>
    </font></b>
    <input type="button" value="Play Video 1" name="PlayVid1" onClick="playVid1()">
    <input type="button" value="Play Video 2" name="PlayVid2" onClick="playVid2()">
    <input type="button" value="Play Video 3" name="PlayVid3" onClick="playVid3()">
    <input type="button" value="Play Video 4" name="PlayVid4" onClick="playVid4()">
  </form>
</div>
</body>
</html>

And here is the code inside my fla:

import flash.external.ExternalInterface;

function playVideo1():void {
    //Play Video 1
}
function playVideo2():void {
    //Play Video 2
}
function playVideo3():void {
    //Play Video 3
}
function playVideo4():void {
    //Play Video 4
}

ExternalInterface.addCallback("playVid1", playVideo1);
ExternalInterface.addCallback("playVid2", playVideo2);
ExternalInterface.addCallback("playVid3", playVideo3);
ExternalInterface.addCallback("playVid4", playVideo4);

Any help would be greatly appreciated!!