Making Facebox wait until FLV player has loaded.

Question

Not entirely sure how to do this, but I noticed that Facebox works perfectly, but when I use it to load a movie, the FLV Player, JWplayer isn't fully loaded yet, and errors out. So I want to load JWplayer ( the FLV player ), before Facebox.

Facebox gives this as their embed code. And they explain that you can pass an argument in it as well.

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

My embed code for the FLV player is this :

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');

I tried just copying and pasting the embed code into Facebox's (). But I got a syntax error returned. Any ideas?

Answer 1

I don't know how you have your links set up, but this is how I would do it:

HTML (video url in href and video image in rel)

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

Script (untested)

$(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;
 })
})