Loading an FLV in Facebox with jQuery for IE7 and IE8

Question

It goes almost without saying, this works perfectly in Chrome, Firefox, and Safari. IE (any version) being the problem.

Objective: I am trying to load JWplayer which loads an FLV from S3 in a Facebox popup.

jQuery(document).ready(function($) {
  $('a[rel*=facebox]').facebox() 
})

HTML (haml):

%li#videoGirl
  = link_to 'What is HQchannel?', '#player', :rel => 'facebox'

.grid_8.omega.alpha#player{:style => 'display: none;'}
  :javascript
    var so = new SWFObject('/flash/playerTrans.swf','mpl','640px','360px','0');
    so.addParam('allowscriptaccess','always');
    so.addParam('allowfullscreen','true');
    so.addParam('wmode','transparent');
    so.addVariable('file', 'http://hometownquarterlyvideos.s3.amazonaws.com/whatishqchannel.flv&autostart=true&controlbar=none&repeat=always&image=/flash/video_girl/whatishqchannel.jpg&icons=false&screencolor=none&backcolor=FFFFFF&screenalpha=0&overstretch');
    so.addVariable('overstretch', 'true')
    so.write('player');

Problem:

1. Despite the video being set to display: none;. It begins playing anyway.
2. When clicking on the activation div, IE7 pops up a wrong sized blank div with a nav (params are set to not show nav and scrubber), and no buttons on the nav and srubber work. IE8 shows the right size but same behavior with nav and scrubber not working, and blank screen.

My guess:
I'm thinking that the problem is with the javascript not being called at the right times. It seems it's loading the facebox without the jwplayer. At least I assume. Hence the reason why the nav is there. I thinking that it did not read the javascript for that.

Answer 1

Hi Trip,

There are a couple of issues here.

FIRST ISSUE: SWFOBJECT

I think you're seeing undesirable / unpredictable behavior because your SWFObject syntax is a bit off. With SWFObject, you can either:

1.) Use the addParam('flashvars', FLASHVARS), where FLASHVARS is a concatenated string of configuration options separated by &amp, ie

var so = new SWFObject('/flash/playerTrans.swf','mpl','640px','360px','0');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('wmode','transparent');
so.addParam('flashvars', 'file=http://hometownquarterlyvideos.s3.amazonaws.com/whatishqchannel.flv&autostart=true&controlbar=none&repeat=always&image=/flash/video_girl/whatishqchannel.jpg&icons=false&screencolor=none&backcolor=FFFFFF&screenalpha=0&overstretch=true');
so.write('player');

OR

2.) Use a bunch of addVariable statements, ie

var so = new SWFObject('/flash/playerTrans.swf','mpl','640px','360px','0');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('wmode','transparent');
so.addVariable('file', 'http://hometownquarterlyvideos.s3.amazonaws.com/whatishqchannel.flv');
so.addVariable('autostart', 'true');
so.addVariable('controlbar', 'none');
so.addVariable('repeat', 'always');
so.addVariable('image', '/flash/video_girl/whatishqchannel.jpg');
so.addVariable('icons', 'false');
so.addVariable('screencolor', 'none');
so.addVariable('backcolor', 'FFFFFF');
so.addVariable('screenalpha', '0');
so.addVariable('overstretch', 'true');
so.write('player');

If you need any additional information, there's an excellent tutorial on Embedding Flash on the JW Player site and a setup wizard that will provide ready-to-use SWFObject code.

SECOND ISSUE: AUTOSTART WHILE display: none

This is an IE quick. In most browsers, Flash is killed when you set display: none. This isn't the case in IE. To prevent this, you'll need to set

so.addVariable('autostart', 'false');

If you're using a bit of JS to set the display CSS property and you'd like the player to start playing when the player appears, I'd suggest you modify your JS to start and stop the player via it's API. Admittedly this is a bit more complicated, but it's all part of making things work seamlessly cross-browser.

Best,

Zach

Developer, LongTail Video

Answer 2

This code will successfully load JWplayer after the facebox javascript is instantiated. There is still something screwy going on with video not displaying in IE7 or IE8, but JWplayer loads appropriately.

HTML:

<a class="flash" href="http://hometownquarterlyvideos.s3.amazonaws.com/whatishqchannel.flv" rel="/flash/video_girl/whatishqchannel.jpg">Flash</a>

Javascript:

$(document).ready(function(){
 // click on flash video link
 $('.flash').click(function(){
  $.facebox('<div id="fbvideo"></div>');
  var so = new SWFObject('/flash/playerTrans.swf','fbvideo','640px','360px','0');
  so.addParam('allowscriptaccess','always');
  so.addParam('allowfullscreen','true');
  so.addParam('wmode','transparent');
  so.addVariable('file', $(this).attr('href'));
  so.addVariable('autostart','true');
  so.addVariable('controlbar','none');
  so.addVariable('repeat','always');
  so.addVariable('image',$(this).attr('rel'));
  so.addVariable('icons','false')
  so.addVariable('screencolor','none');
  so.addVariable('backcolor','FFFFFF');
  so.addVariable('screenalpha','0');
  so.addVariable('overstretch', 'true');
  so.write('fbvideo');
  return false;
 })
})