JW Player: cross-browser “display:none” player behavior

Question

Is there a simple, upfront method to have FF and IE treat hidden JW Players the same?

I am placing different instances of the player dynamically in jQuery generated tabs. In effect, switching tabs hides the parent div of each player. In FireFox, the tab switch and accompanying "display" change stops the player. This doesn't happen in IE. I would like it to.

What is the easiest way to have both browsers act the same? I am hoping for a CSS/HTML solution, either thorough the way the players are embedded or a style rule Otherwise I suppose I will need to add an item listener that compares the currently selected tab id to currently active players... but I'd rather not go that route.

Thanks for your tips!

EDIT: So, I'd rather be able to change the player CSS or markup on tab change than send stop events to all the players but the player in the currently active tab.

Answer 1

This is an issue with Internet Explorer. While FF, Chrome, and Safari will kill Flash, IE doesn't. The only way we've been able to ensure that the player stops is to keep track of all active players on the page and call stop.

Best,

Zach

Developer, LongTail Video

Answer 2

If you're using JavaScript to change tabs, why are you hoping for a pure CSS/HTML solution for your problem?

I think you have to use JavaScript.

Take a look at the JW Player API: http://developer.longtailvideo.com/trac/wiki/Player5Api

You can call the stop() method on the player.

player.stop();

Answer 3

Sorry my friend. I've a big trouble that doesn't make me sleep... I've a site with: - a div with a video (jwplayer) - a div with a gallery (lightbox, on click popover of image)

If video play and a user (only with IE) click on a image, the popover appears over video, the video continues to play (ok!) but video goes blank! When I close image popover, video timeline play normally but video is still blank (all black).

I've been try to use what you wrote here but without success. This is the script I must use to insert jwplayer.

<div id="Player">player should load here</div>
    <script language="javascript" type="text/javascript">
    var flashvars = {};
    flashvars.linkfromdisplay = "true";
    flashvars.autostart = "false";
    flashvars.height = "' . $h . '";
    flashvars.controlbar = "over";
    flashvars.width = "' . $w . '";
    flashvars.repeat = "false";
    flashvars.bufferlength = "5";
    flashvars.displayheight = "' . $h . '";
    flashvars.displaywidth = "' . $w . '";
    flashvars.file = "http://blablabla.com";
    flashvars.type = "vdox";
    flashvars.provider = "vdox";
    var params = {};
    params.menu = "true";
    params.allowscriptaccess = "always";
    params.allowfullscreen = "true";
    params.wmode = "transparent";
    params.windowless="true";
    var attributes = {};
    attributes.id = "Player";
    attributes.name = "Player";
    swfobject.embedSWF("' . get_bloginfo("template_directory") . '/embed/mediaplayer.swf", "Player", "' . $w . '", "' . $h . '", "8","expressInstall.swf", flashvars, params, attributes);
    </script>

I tried also to stop via js video before open popover (player1.sendEvent('STOP');): video stops, but if I click on play button, remains black.

I tried also to remove video element via jquery, saving it in a variable. Then I insert a button "restore video": in Chrome works, in IE reappear video object, it play but all black. Thanks