How to detect Flash events from swfobject

Question

Hi. I've been reading about using ExternalInterface to have Flash communicate with JavaScript. I need to detect and call some code in JavaScript when the user starts playing the video and when the video ends. The swfobject is nifty for embedding a player on the page, but I can't figure out how to add these event handlers to it. Here's my code:

function flashFallback(){
jQuery('#dialog').dialog({
  modal:true,
  autoOpen:false,
  height: 119
});
jQuery("#dialog").dialog("open");

setTimeout(function(){
  var el = "";
  var vidFileName = "";
  var posterPath = "";
  var videoTag = "";
  var boxId = "";
  var so = "";
  var flashId = "";
  var flashVars = "";
  var params = "";
  var attributes = "";
  var anchorId = "";
  var dotPosition = "";
  var count = jQuery("video").length;
  //alert(count);

  jQuery("video").each(function(){
    el = "";
    vidFileName = "";
    posterPath = "";
    videoTag = "";
    flashId = "";
    flashVars = "";
    params = "";
    attributes = "";
    anchorId = "";

    el = jQuery(this);

    boxId = this.id + "_flashBox";
    flashId = this.id + "_flashPlayer";
    anchorId = this.id + "_anchor";

    el.parent().parent().find("div:first").attr("id",boxId);

    el.parent().find("source").each(function(){
      if (jQuery(this).attr("src").indexOf("m4v") != -1 || 
        jQuery(this).attr("src").indexOf("mp4") != -1){
        vidFileName = jQuery(this).attr("src").substring(jQuery(this).attr("src").lastIndexOf("/")+1);
      }
    });

    /*
      IE uses the Flash player, which overlays a 'Play' button
      on the poster image by default; so we use a poster image
      that doesn't have a play button. Otherwise we'd end up 
      with a play button on top of a play button.
    */

    dotPosition = el.parent().find("img").attr("src").lastIndexOf(".");
    posterPath = el.parent().find("img").attr("src").substring(0,dotPosition) + "-ie" + el.parent().find("img").attr("src").substring(dotPosition);

    el = jQuery("[id="+boxId+"]");
    el.empty();
    el.append("<a id='" + anchorId +"'></a>");

    flashvars =
    {
      file:                 vidFileName,
      autostart:            'false',
      image:                  posterPath
    };

    params =
    {
      allowfullscreen:      'true', 
      allowscriptaccess:    'always',
      wmode:                  'opaque'

    };

    attributes =
    {
      id:                   flashId, 
      name:                 flashId
    };

    swfobject.embedSWF('global/vid/player.swf', anchorId, '372', '233', '9.0.124', 'global/js/swfobject/expressInstall.swf', flashvars, params, attributes);
  });
  jQuery('#dialog').dialog("close");
}, 200);

}

Answer 1

You don't have to bother with that. Just detect the events in flash and then call the javascript function you want in your flash event handler:

import flash.external.ExternalInterface;
...
ExternalInterface.call("your_javascript_function()");

http://codingrecipes.com/calling-a-javascript-function-from-actionscript-3-flash