IE9 + jwplayer: __flash__addCallback error if move player in dom before calling player.load()

Question

UPDATE: The premise of this question turned out to be misguided. The problem does not happen unless the move is in response to a user-click. Please see here.

---

I have been knocking my head against a bug for a few days and am hoping someone can help.

I have a jquery script that makes calls to a jwplayer object ("myplayer") using the jwplayer javascript api. For example, to load myplayer with a particular video, I call:

myplayer.load('my_url');

This works fine in both firefox and internet explorer, so long as I don't first move the player to a different location in the DOM.

However, my script sometimes moves the player from location A to location B and then back to location A, before calling myplayer.load(). This works fine in firefox. But in internet explorer 9, I get an error on this line:

return eval(instance.CallFunction("<invoke name=\""+name+"\" returntype=\"javascript\">" + __flash__argumentsToXML(arguments,0) + "</invoke>"));

which is inside this function:

function __flash__addCallback(instance, name) {
  instance[name] = function () { 
    return eval(instance.CallFunction("<invoke name=\""+name+"\" returntype=\"javascript\">" + __flash__argumentsToXML(arguments,0) + "</invoke>"));
  }
}

If I trace what is happening in the internet explorer debugger, I see that myplayer.load('my_url') calls this.callInternal("jwLoad",u) in jwplayer.js, and it is apparently while executing this.callInternal("jwLoad",u) that the error occurs.

Details:

The html looks something like this:

<div id='stage'>
    <div id='myplayer_wrapper'>
        <object id='myplayer'>...</object>
    </div>
</div>
<div id='holding-pen'></div>

When the player is not being used, I move its wrapper-div to the holding-pen:

var el = $('#myplayer_wrapper');            
$('#holding-pen').append(el);

After moving the player's wrapper-div to the holding-pen, the html now looks like:

<div id='stage'></div>
<div id='holding-pen'>
    <div id='myplayer_wrapper'>
        <object id='myplayer'>...</object>
    </div>
</div>

When I wish to use the player, I move its wrapper-div back to the stage-div:

var el = $('#myplayer_wrapper');            
$('#stage).append(el);

After moving the player's wrapper-div to the stage-div, the html looks the same as it did originally:

<div id='stage'>
    <div id='myplayer_wrapper'>
        <object id='myplayer'>...</object>
    </div>
</div>
<div id='holding-pen'></div>

On page load, I create the player-object and move it to the holding-pen. I then move it to the stage and load a video.

If the user clicks on, for example, an image-thumbnail, I move the video-player to the holding-pen and move the selected image to the stage.

If the user then clicks on a video-thumbnail, I retrieve the video-player from the holding pen and move it back to the stage. I then load the player with the selected video. This is where the "_flash_addCallback" problem occurs in internet explorer.

Does anyone have any insight into what may be going on? Or any suggestions for how I can get this to work in internet explorer?

Thank you very much!

Answer 1

This seems to be a known problem with IE (6, 7, 8 & 9) as far as various posts on the web go. It depends on the combination of Flash versions and IE versions.

IE has, seemingly, reserved methods for the words one would expect from media players:

• play
• stop
• pause
• length

...and the __flash__addCallback() function seem to use those same words. play and stop are a vital part of Flash movies and dictate when they play or stop. I can't confirm if later versions of Flash have amended this.

Sources supporting this:

• Problem occurring in __flash__addCallback
• https://groups.google.com/forum/#!topic/glow-users/7A0tOf60Sl4
• ExternalInterface.addCallback not working in IE8 Flash 10.0 or below

An interesting twist: http://beweb.pbworks.com/w/page/53110280/Flash%20IE8%20Javascript%20Error

Some people have recommended using SWFObject to go around browser problems such as this one, others have looked at the way Soundcloud fixed their player - though this SoundCloud article shatters any shred of hope there.

In the end of the day, the problem lies on how Flash expects JavaScript to communicate with itself, which crashes with reserved methods in IE. You may have to:

• update your jwplayer
• create an issue on jwplayer's bug tracker
• make a workaround to the problem yourself...

Something that has helped me go around many IE problems is changing the DOCTYPE to <!DOCTYPE html>. Simple and yet effective. Note that IE7 prefers that the word DOCTYPE is written uppercase. Whenever I try this I know I've turned into a desperate zombIE. :P

And last but not the least, make sure you close the last single quote below:

$('#stage).append(el);