Finding the best way to insert Flash

The first solution I found was called Flash Satay by Drew McLellan. He basically started tweaking the object tag until all major browers managed to display the Flash content. While this sounds nice at first look, it does have several limitations. Internet Explorer won't stream the Flash but insists on reading the entire contents before starting it. If the user doesn't have Flash or an outdated Flash player, it just comes out blank. The last problem can be fixed by adding a blank "dummy" Flash file with a IE-specific construct that will do auto-install.

The second one was a piece of code by Ian Hickson that looked nice and clean, but unfortunately was very poorly documented (he doesn't mention what browsers it has been tested in at all) and did use the IE specific comment-conditionals that I was set to avoid if at all possible.

The third (and last) returned solution was a small JavaScript thingy called SWFObject by Geoff Stearns. While my employer doesn't have statistics on JavaScript usage among its users, I absolutely will not go for a solution that requires JavaScript in order to display anything. I've burned myself before on a similar choice before.

But if you combine these, you will get a fairly nice setup. The big plus for SWFObject is that you define a <div> with content, and that content will be replaced with the Flash file if and only if SWFObject manages to do so. So if the <div> contains the Flash Satay method wrapped inside <noscript> I will have a nice fall-back for users without JavaScript. I'm also guessing that people likely to turn off JavaScript are likely to have an up to date Flash player anyway, if they haven't disabled Flash as well.

And for people with Flash completely disabled, the <object> tag itself has a nice fallback builtin. The content of an <object> tag is rendered in place of the object if the object can't be displayed. So any animated gif or textual message I want shown to those users is placed within the Flash Satay code which in turn is within the <div> that SWFObject operates on!

Example code (assumes swfobject.js is included in your header):

<div id="myflash_container">
  <script type="text/javascript">
    <![CDATA[
    // This is shown if we have JS support, but swfobject couldn't find a Flash plugin
    document.write('<div style="width: 150px; height: 150px;
background-color: #000000;">');
    document.write('<a href="http://www.adobe.com/go/gntray_dl_getflashplayer">');
    document.write('Get Flash player to view this content</a></div>');
    ]]>
  </script>
  <noscript>
    <!-- For browsers without JS support use Flash Satay for fallback -->
    <object type="application/x-shockwave-flash" data="testflash.swf" width="150"
height="150">
      <param name="movie" value="testflash.swf" />
      <div style="width: 150px; 
height: 150px; background-color: #000000;">
        <a href="http://www.adobe.com/go/gntray_dl_getflashplayer">
          Get Flash player to view this content
        </a>
      </div>
    </object>
  </noscript>
</div>
<script type="text/javascript">
  var so = new SWFObject("testflash.swf", "myflash", "150", "150", "7", "#000000");
  so.write("myflash_container");
</script>

If you wonder why I have to use the <nocscript> tag the reason is simple. Otherwise Flash Satay would display the Flash content on load, only to have it instantly replaced with the same Flash by SWFObject. This would without doubt put some strain on the clients at load.

I haven't tested this extensively, but Firefox 1.5 (with and without JS), Opera 8.5 (with and without JS), IE 5.0, IE 5.5 and IE 6 all showed the Flash in all its glory. If you have problems making it work, feel free to let me know.

Since most of the development at my current job is done in JSP, I will (in due time) make my own taglib for using this technique. Doesn't <flash:insert name="myflash" file="testflash.swf" width="150" height="150" version="7" background="#000000" /> sound good to you too? A small PHP function would probably take a couple of minutes to whip up.

Addendum: If you want SWFObject to work in IE4 and NS4 you need to add the following (before you include swfobject.js in the header is probably a good bet):

<script language="JavaScript" type="text/javascript">
  if(document.all && !document.getElementById) { /*ie4*/
    document.getElementById= function(id) {
      return(document.all(id));
    }
    document.getElementsByTagName= function(id) {
      return(document.all.tags(id));
    }
  }

  if(document.layers) { /*ns4*/
    document.getElementById= function(id) {
      return(document.layers[id]);
    }
  }
</script>