Comparing SWFObject with Other Methods

There have been several methods over the years to detect versions of Flash Player and embed SWFs into HTML pages. This section looks at each of the most popular methods and points out their respective limitations.

Default Embed Method

Everyone knows the default Flash embed method. It consists of an object tag with an embed tag placed inside as a fallback mechanism. This is the most popular Flash embed method and is the default choice when publishing your SWF from the Flash IDE. This is the most compatible way to embed a SWF and it works in the widest range of browsers.

Here is an example of the default Flash embed code:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"  
  codebase="http://fpdownload.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#version=7,0,0,0" 
width="550" height="400" id="Untitled-1" align="middle">
 <param name="allowScriptAccess" value="sameDomain" />
 <param name="movie" value="mymovie.swf" />
 <param name="quality" value="high" />
 <param name="bgcolor" value="#ffffff" />
 <embed src="mymovie.swf" quality="high" bgcolor="#ffffff" width="550"  
   height="400" name="mymovie" align="middle" allowScriptAccess="sameDomain" 
    type="application/x-shockwave-flash" 
pluginspage="http://www.macromedia.com/go/getflashplayer" />
 </object> 

While this is the most common method of embedding your movies, it does have a few drawbacks:

• There is no plug-in detection: With no plug-in detection, users may see broken or no content. If there is no plug-in installed at all, they will either get the “ActiveX install” message in Internet Explorer (see Figure 1), which many users now fear because of rampant spyware and malware, or the “strange puzzle piece” box in Mozilla-based browsers (see Figure 2). Neither of these plug-in install systems is very user friendly. They don’t explain themselves well as to what exactly a user is installing.
• It is not valid HTML or XHTML: There is no such thing as an embed tag in any version of HTML or XHTML. However, because many browsers handle object tags differently (or not at all, or the implementation is too buggy), the embed tag is needed as a fallback mechanism.

Figure 1. ActiveX install message in Internet Explorer

Figure 2. Plug-in install message in Firefox

Object Tag Only and Flash Satay

Here are two examples of Object Tag Only embedding and Flash Satay:

Object Tag Only

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/
   cabs/flash/swflash.cab#version=6,0,40,0" width="300" height="120">
  <param name="movie" 
value="http://www.macromedia.com/shockwave/
       download/triggerpages_mmcom/flash.swf"> 
  <param name="quality" value="high">
  <param name="bgcolor" value="#FFFFFF"> 
 <!--[if !IE]>  
 <object data="http://www.macromedia.com/shockwave/
   download/triggerpages_mmcom/flash.swf"  
   width="300" height="120" type="application/x-shockwave-flash">
   <param name="quality" value="high">
   <param name="bgcolor" value="#FFFFFF"> 
  <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
   FAIL (the browser should render some flash content, not this).
  </object>
   <![endif]--> 
</object> 

Flash Satay

<object type="application/x-shockwave-flash
 data="c.swf?path=movie.swf" 
 width="400" height="300">
 <param name="movie"
  value="c.swf?path=movie.swf" />
 <img src="noflash.gif" 
 width="200" height="100" alt="" />
 </object> 

Both of these methods have their limitations:

• There are accessibility issues: Using Flash Satay, some screen readers (like JAWS) ignore Flash content entirely.
• There is no plug-in detection: As is the case with the default embed tag in Flash, if there is no plug-in detection, users may see broken content—or none at all. When Flash Player encounters a SWF embedded in a page, it will try to play it no matter what the version is. So if you have Flash Player 6 installed and encounter a Flash 7 SWF, your plug-in will try to play it anyway, possibly causing odd behavior.
• Some methods of Flash Satay do not stream the SWF to the player: This method may require “holder” SWFs into which your movie is loaded. This makes passing variables from FlashVars parameters a hassle. It’s also a pain to maintain Flash content because you now have twice as many SWF files floating around your web server.
• Older versions of Safari ignore param tags: Until version 2.0 (on Mac OS X “Tiger”) or 1.3 (OS X “Panther”), the Safari browser completely ignored the param tag. This meant that if you tried to set other options using them—like Flashvars, Align, Salign, and so on—Safari did not see those values.

“Small Flash Movie on the Index Page” Method

This method involves placing a single SWF on the index page of your website, which then checks the $version variable in Flash Player and redirects the user either to the Flash content inside the site or a “Flash upgrade” page.

Here are the problems with this method:

• There is no Flash Player detection on internal pages: If a user sends an internal URL to another user, that new user bypasses the Flash detection on the index page.
• It is not valid HTML or XHTML: The embed tag required to place the SWFs in your HTML documents will not validate.
• You hurt your own search engine ranking: Because this method requires you to use your index page solely as an empty Flash detection page, search engines will show your site description as something meaningless like “Detecting Flash Player” or even nothing at all. This is a huge waste of prime website real estate that you should use instead to promote your company or products. In addition, developers often fail to include a link to the other content in the site (because those links are in the SWF, they figure) so the rest of your website is never indexed either.

Flash Player Detection Kit

Macromedia (now Adobe) did an excellent job with the Flash Player Detection Kit released with Flash Player 8—but it does still have its limitations. It contains two different ways to detect Flash Player:

• Small Flash movie: The classic “small Flash movie on the index page” method has the problems I just described.
• JavaScript: Yes, that’s right, Flash includes a JavaScript plug-in detection template. Unfortunately, it’s not very user-friendly because it mixes JavaScript, VBscript, and your HTML all into one page. This has many of the drawbacks as past JavaScript detection and embed techniques had, and doesn’t do anything to make your life easier as a Flash/HTML developer. Furthermore, it doesn’t validate as XHTML or HTML (assuming you care about that sort of thing).

Raw JavaScript to Detect and Embed SWFs

It’s hard to critique this method because it usually varies from site to site. However, most JavaScript Flash-detection schemes I come across generally suffer from the same faults:

• Unreliable plug-in detection: Often the detection works only with current versions of Flash Player and needs to be updated manually as new versions of the plug-in are released.
• More code added to the page: This makes it even harder to update or change your content. This method also makes it harder for designers or other people working with your pages to change or add Flash content.
• An overly complicated solution: Many Flash embedding scripts can grow to large file sizes or be overly complicated. SWFObject is designed to be simple and small.