external interface and swfobject.js issue

Question

Several months ago for a project at work i developed a video player using flash, external interface and swfobject.js. I used external interface to facilitate communication between javascript and actionscript. This works great. Currently I am working on an extension to this that requires me to extrapolate logic from what i already written. I am using the same swf file in both applications, but in the extension i can't get the flash object to recognize my calls. Since i am using the same swf object i know that my problem is in the javascript, i just don't know where. I am using the JQuery Library. Without further adieu here's my code.

At the bottom of my js file i have the following:

$(function(){
     //the video player shouldn't be built until the user presses the div with 'video-btn' class
    $('.video-btn').click(function(){
         var videoplayer = new VideoPlayer();
         videoplayer.addVideoPlayer();
         //external interface function
         videoplayer.player.loadVideo();
    });
});

Here's the definition for VideoPlayer.addVideoPlayer() and it's relevant helper functions:

//inside of VideoPlayer object definition
this.addVideoPlayer = function(){
     var that = this;
     $('body').append('<div id="no-flash"></div>');

     //uses swfobject.js to replace the div i just appended with the flash object
     //This works fine.  the flash object replaces the div as intended
     that.embedFlashObject();
     //that.player is (supposed to be) a reference to flash object
     that.player = that.getFlashObject();
};

this.embedFlashObject = function(){
     var that = this;

     //set up all the variables to pass to swfobject.embedSWF

     //this method removes my div and replaces it with an object element that contains the swf file
     //the object tag gets an id which is specified.  Let's assume it's 'vp'
     swfobject.embedSWF(swfFile, 'no-flash', width, hieght, '9.0.0', ... );
};

this.getFlashObject = function(){
     var that = this;

     //this method returns the flash object to make external interface calls on
     //this the method prescribed by swfobject api  
     var videoObj = swfobject.getObjectById('vp');
     if(typeOf videoObj == 'undefined')
     {
          //check if useragent string is IE
          var isIE = navigator.userAgent.match(/MSIE/i);
          videoObj = isIE ? window['vp'] : document['vp'];
     }
     return videoObj;
};

In my $(function(){..}); block, when the command 'videoplayer.player.loadMedia();' I get an error that reads

.loadMedia is not a function.

In the previous version of this project (in which i use the exact same swf file) i do not get this error.

I don't think i am missing any severe logical errors, and i know its difficult to say definitively 'this is your issue,....' when looking at abbreviated and scrubbed code. In lieu of a definite answer i'll take suggestions as to how to debug this issue. I've been playing aorund in the browser console and i've found that the 'player' attribute of my VideoPlayer object is null. When i ran the same console query against the working version of this project it spits back the object tag. I can't directly set the object tag, because it will break with the conventions used in the previous version which i need to maintain.

HELP!!!!!!!!!!!!!!!

Answer 1

SWFObject Callback function

Please go through the documentation of SWFObject. https://code.google.com/p/swfobject/wiki/api

All the functions for creating or embedding SWF has a callback parameter. You can pass a callback function as parameter which will be invoked when SWF is ready. Invoke your ExternalInterface actionscript function in this callback function.

Example:

swfobject.embedSWF("/Flash/Player.swf", "flash", "100%", "100%", swfVersionStr, xiSwfUrlStr, flashvars, params, attributes, function (e) {
    document.getElementById("flash").loadMedia();
});