display:none does not stop Flash in IE

[astgtciv]

Can't seem to find any info on this. Let's say I have a tabbed layout, with a div in each panel. I have a flash movie (with sound!) playing in the first panel div which is initially active. When I click on another tab, I have javascript which goes through all the panels (divs), and sets style.display='none'. In FF this stops the flash movie from playing. In IE6 (at least!), setting display to none does not stop the movie from playing. Any ideas on workarounds for this?

[drexle]

The first things that comes to my mind is that you could use FSCOMMAND to have javascript talk to the flash player and tell it to stop playing. You might set _root's visibility to "false" and turn off all sounds.

[astgtciv]

Changing the flash might be a way to workaround it indeed, but in this case I am looking for js/html-only solution. One way to do this would be to set the innerHTML of the div containing the flash to an empty string (saving it before hand), and then when the tab comes back, to set the innerHTML again. However, I found that IE inconsistently reports innerHTML! E.g., a (rather long) FlashVars field is simply dropped from the flash embed, so when I try to recreate the innerHTML the flash appears uninitialized. This is pretty odd...

[tg]

this may be a pain, or might not work... but could you try writing out the <objec><embed> tags for your flash each time the tab is opened, assigning the flash piece an id value, and deleting that item each time another tab is selected?

its a bother... but may work for you.

[astgtciv]

That's true, that would work - writing out the content of the div with the<embed> dynamically every time the frame is shown... a bit of a bother, but it should work. I was thinking of a more general solution - if innerHTML doesn't work the way it's supposed to in IE, I think it's worth trying using the DOM manipulation methods directly, since innerHTML is basically a DOM serialization/deserialization routine - which looks to be buggy (perhaps by design :)) in IE.

[tg]

well i think trying to cover the browsers with just the dom will end up giving you problems in the long run.... heh. in the short run too for that matter.

[astgtciv]

Well, I ended up doing what you suggested - giving the panel an onShow and onHide js hooks which are evaluated at respective times. The onHide hook empties the <div> of the flash content, and onShow fills the div with the flash embed again. Seems to work fine. Thanks for all the help, TG!

[Before doing that I attempted removing the objects from the DOM using removeChild, saving them in a global variable which mapped from panel ids to child array objects, and then re-adding the children on showing. But guess what - even when the div with the flash was removedChild'ed from the DOM, sometimes the audio still kept playing in IE!]

[jsebrech]

Just a note, the fact that flash movies stop playing in firefox when their containing div is set to not display is marked as a bug, and might one day be fixed. So, it's best not to build sites that depend on this behavior.

[astgtciv]

Oh, thanks, Joeri! I was in fact thinking that the IE behavior (albeit being inconvenient in my particular case) is actually a bit more logical... FF simply seems to re-embed the flash when the div is re-displayed. Well, this is good to know.

[jsebrech]

For those interested, this is the bug in question:
https://bugzilla.mozilla.org/show_bug.cgi?id=262354