Flash video still playing on DIV that is removed using jQuery (IE bug)

Question

I have some jQuery tabs one of which holds a flash video. When I play the video in one tab and click to another in FF or Safari the video stops along with the sound, clicking back to the video tab reloads the content - as expected.

In Internet Explorer this is not the case, the video continues to play even when the tab is not selected. My understanding is that when display:none (jQuery hide()) is applied the DOM element is essentially removed from layout - why is this not happening with IE browsers, how can I fix it?

Answer 1

It's likely because you're applying the display: none; to the div holding the flash object, not the flash object itself.

I was messing around with a sort of similar issue today and while I don't have an exact solution for you I do have a possibility you could try when you jump between divs to try and turn the player off:

$(flashobjectid).attr('height', '0');

If the flash player you're using happens to be the commonly used jw player then you could do (when you hide the div):

document.getElementById(playerId).sendEvent("PLAY","false");

Answer 2

You could try removing the element when you are tabbing away from the div containing the flash like $("object").remove();

Answer 3

You may need to program a player.stop or player.pause function for the player on the onBlur event of the page.

Answer 4

The most helpful thing you could do is the post which video player you're using. Youtube and Brightcove both have Javascript APIs that you can use to control the player. Like tahdhaze says here, the best thing to do would be to stop the player on the window.onBlur event, and start it again when it gains focus.

Using CSS to stop the video from playing is at best tricky, at worst a hack... use the Flash-Javascript bridge API that comes with the player.

Answer 5

simply clear the container of the video like this:

$("#VideoContainer").html("");

Answer 6

I am having the opposite problem. I have interactive flash pie charts and an interactive flash map in jquery divs. In IE, when i interact with the flash object in one tab, say pull a slice out of the pie chart, when i click on another tab then go back to the chart tab, the last state is remembered - the slice is still pulled out. But in Firefox, when i navigate to another tab and then go back, it reloads the flash object from the start - the slice that was pulled out isn't anymore. I've been searching for days for a work around to this issue (some say it's a bug in how firefox handles plugins dating back to 2001).

It seems to be related to "display: none". I'm not that well versed in javascript. so i'm hoping that someone might have come up with a workaround or an alternative to jquery tabs that doesn't use "display: none".

Thanks for any guidance! Trish

Answer 7

$("#flashContainer").empty() 

will also flush the embed code and stop Flash

Answer 8

Hi.

If I use .empty() or .remove() how can I unempty or unremove the div. Basically if I close a div with one of these I can't open it again.

Answer 9

To remove the video and then re-add it, add the following to your function that closes the video window:

 // Remove and re-add video
 var clone = $("#video-holder").clone(true);
 $("#video-holder").remove();
 $("#video").html(clone);

Where you have a surrounding "video" div, and inside a "video-holder" div that houses the embed code.