mediaelement/mediaelement

API method to prepare Flash object for removing

sompylasar opened this issue · 15 comments

When inserting and removing MediaElement dynamically, there is a problem in at least IE8 that Flash object continues to call ExternalInterface JS functions which in turn try to refer the corresponding DOM Element by its id. As soon as the DOM Element is detached, getElementById fails and IE8's ExternalInterface JS functions throw 'null is not an object' errors at each sendEvent from Flash.

So, there is a need to tell Flash object to stop calling JS functions. There should be some 'destroy' API method to fix this issue.

Looks like IE would need something like this from SwfObject:
http://code.google.com/p/swfobject/source/browse/trunk/swfobject/src/swfobject.js#474

Thanks for finding this. Could this be incorporated into MediaElement? As you don't use SwfObject internally and a user cannot determine what plugin was installed by MediaElement without hacking into, either you should use SwfObject for Flash or should provide a method for crossbrowser removal of the plugin element.

$('object').remove(); worked for me, but looks like an ugly hack.
Can you incorporate sfwobject fix into medialement.js, please?

I've spent several hours before fixing it myself. Symptoms were:

Prior IE8:


IE8:

coagulant -- where did you apply your hack? i am loading inline videos with a colorbox & my debugger [IE8] is throwing a "node is null & not an object" error -- I think that this is due to the issue stated above, my player being unable to reinitialize in the colorbox.

I was using colorbox jquery plugin, so I've put this code in cbox_cleanup callback just before the colorbox is removed from DOM on close.

I'm using the colorbox module for drupal & displaying my videos as inline content -- and they are turning up, but the controls don't work [hence the error being thrown] -- can't figure out how to bypass it. I'm confused; are you able to initialize the player properly on cbox_open?

I'm creating new MediaElement in onComplete callback. Works fine for me. The key point is to remove flash object correctly

I'd love to see an example of your implementation, if possible. I've been
stuck on this for a few days.

are you sure you placed it in the OnComplete callback? I feel like all the
elements get loaded before the script can fire. Also, how did you link to
your content & trigger the colorbox? If it was an inline div, did you use a
containing div as a selector, or the video/player ID?

Sorry, I can't publish the code.

I was thinking more of an idea as to how you built your URL. Most people can't publish their commissioned code, I understand.

I'm finally getting around to adding this to the core project. Hopefully it'll show up in a minor release later this week.

In 2.4.1, you can call the remove() method on the player object or the media object

var player = new MediaElementPlayer('#player', {
    success: function(media, node) {    
    }
});

$('#remove-player').click(function() {
    player.remove();
});

This is awesome, John. Thank you.

In the remove() function I was still getting an error in IE7 saying that "Object doesn't support this action" referencing the line:

delete t.node.player;  // Line #2988 

Not sure if this was the best fix, but I fixed it by wrapping a try/catch around it like so:

try {
    delete t.node.player;
} catch (e) {
    t.node.player = undefined;
}