Wednesday, March 12, 2008

White Box When Using SWFObject and FLV player?

Have you seen the random white box in Internet Explorer when using the SWFObject script to load your flash files that use JW FLV Player? I've found it to occur when calling the script either inline or from the window load event when the browser has it's Temporary Internet Files handling set to check for newer files Automatically. I've been able to reproduce it most easily by using a script like this:

function loadVideo()
{
    var so = new SWFObject("/videos/flvplayer.swf", "productVideo", "480", "360", "8");
    so.addParam("detectflash", "false");
    so.addVariable("image","/images/videos/17.jpg");
    so.addVariable("file", "/images/videos/031120085413.flv");
    so.addVariable("backcolor", "0x7e0f00");
    so.addVariable("frontcolor", "0xffffff");
    so.addVariable("lightcolor", "0x381c18");
    so.write("productVideo");
}

if(window.addEventListener)
{
    window.addEventListener("load", loadVideo, false);
}
else
{
    window.attachEvent("onload", loadVideo);
}

If you refresh the page repeatedly, you will randomly receive a white box instead of the flash video. Right-clicking on the white box will show you that the flash player did load, but didn't render for some reason.

I've found two solutions for this:

  1. Change your Temporary Internet File settings to check for newer files on every visit to a page.
  2. Add a random querystring value to the end of the flash swf file
The resulting code for number 2 would look something like this:

function loadVideo()
{
    var so = new SWFObject("/videos/flvplayer.swf?12341184", "productVideo", "480", "360", "8");
    so.addParam("detectflash", "false");
    so.addVariable("image","/images/videos/17.jpg");
    so.addVariable("file", "/images/videos/031120085413.flv");
    so.addVariable("backcolor", "0x7e0f00");
    so.addVariable("frontcolor", "0xffffff");
    so.addVariable("lightcolor", "0x381c18");
    so.write("productVideo");
}

No comments: