Using SWFObject for More than Just Embedding SWFs

Flash Web Development

My favorite mechanism for embedding SWFs, hands down, is Geoff StearnsSWFObject.  It’s clean, lightweight, and easy to use.  Since April 2006, SWFObject has been my first choice for working around the “click to activate and use this control” warning in Internet Explorer.  Microsoft has decided to remove this activation behavior from Internet Explorer in April 2008 — right around the corner, as of this writing — but there’s still plenty of reason to keep right on using SWFObject.  Why?  Because it provides an elegant way to detect what version of Flash Player (if any) a website visitor has installed.  If you’re using the On2 video codec, for example, it means your site requires Flash Player 8 or higher.  With SWFObject, you can detect if your visitor has at least 8 and then display the SWF; otherwise, display a stand-in message (or image), such as “This site requires Flash Player 8 or higher.”  But what if you want to redirect to another page instead?  Or what if you want to display two different SWFs, depending on what’s installed?  Read on. 

Getting familiar with SWFObject

Geoff’s website explains in detail how to use SWFObject, and he also wrote an Adobe article on the subject.  In a nutshell, you download the source file, which comes in a ZIP archive, you extract swfobject.js and put it somewhere in your site, such as among your HTML documents in the root or some subfolder of the root.  Then you reference this external JavaScript file in the <head> element of any page that intends to use it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Some Document</title>
  <script type="text/javascript" src="swfobject.js"></script>
</head>

Naturally, the src attribute of that <script> element has to path correctly to the JavaScript file.  As shown, the swfobject.js file would be in the same folder as the HTML file that references it.

This allows the HTML document able to create a SWFObject object, then use that object to embed a SWF.  The SWF will automatically replace the contents of <div> element with an arbitrarily named id attribute, such as “flashcontent” (though you could just as easily name it “bananaHead”).

<div id="flashcontent">
  This text is replaced by the Flash movie.
</div>

This <div> element can hold stand-in text, as shown, or an <img> element, or whatever you like.

<div id="flashcontent">
  <img src="someImage.jpg" alt="Some image" width="320" height="240" />
</div>

If the user doesn’t have JavaScript enabled (most users do) or if the user doesn’t have the version of Flash Player you specify — you’ll see this in a moment — the <div> and all its content will be displayed in the browser. If the user does have the specified version of Flash Player (and JavaScript enabled), the browser will display the Flash content.

That part is handled like this.

<script type="text/javascript">
  var so = new SWFObject("someMovie.swf", "mymovie", "320", "240", "9", "#FFFFFF");
  so.write("flashcontent");
</script>

… where so is an arbitrarily named variable that points to the new SWFObject instance.  The first parameter is the name of your SWF; the second parameter is a unique identifier (like the <div> element’s id attribute) that can be reference with JavaScript if desired; the third and fourth are the width and height; the fifth is the minimum required version of Flash Player (here, Flash Player 9), and finally, the background color of the SWF, which can differ from the actual background color of the FLA.

Note that the parameter inside the write() method references the stand-in <div> used earlier by its id.  Badda bing.  It’s that easy.

Using SWFObject for more

What if you want to send users to a different page altogether if they don’t have the right version of Flash Player?  What if you have one FLV video encoded in On2 for users with Flash Player 8 or higher, and another encoded in Sorenson Spark for users with Flash Player 6 or 7?  SWFObject gives you that, too.  And it’s still really easy.

Under the hood, SWFObject creates a deconcept object (the name of Geoff’s website) as soon as the page loads.  This deconcept object contains a SWFObjectUtil child object that, in turn, features a getPlayerVersion() method.  This method returns an object with three useful properties:  major, minor, and rev.  You can use those numbers to detect very specific versions of Flash Player.  As of today, for example, the current version of Flash Player is 9,0,115,0.  Of those numbers, 9 is the major version, the first 0 is the minor, and 115 is the revision, which correspond to the properties just mentioned (the last number refers to internal builds, and is irrelevant to version sniffing).

Here’s a quick example that uses the SWFObjectUtil() method to embed a Flash Player 8 or higher SWF for an On2 video and, for users with Flash Player 6 or 7, a SWF that only requires either of those versions:

<script type="text/javascript">
  var so;
  var flashVersion = deconcept.SWFObjectUtil.getPlayerVersion();
  if (flashVersion.major >= 8) {
    so = new SWFObject("On2Vid.swf", "mymovie", "200", "200", "8", "#FFFFFF");
  } else if (flashVersion.major >= 6) {
    so = new SWFObject("SorensonSqueezeVid.swf", "mymovie", "200", "200", "6", "#FFFFFF");
  }
  so.write("flashcontent");
</script>

The so variable is declared, as before, but this time isn’t set to anything — yet.  Next, an arbitrarily named variable, flashVersion, is set to the return value of the SWFObjectUtil.getPlayerVersion() method.  Inside an if statement, the major property of this object (referenced by way of the variable as flashVersion.major) is compared against the number 8 to see if it’s greater than or equal to.  If it is, the so variable is set to a new instance of SWFObject, as before, and embeds a SWF that displays an On2 video.  Otherwise, if flashVersion.major is greater than or equal to 6, an alternate SWF is embedded.  If the user has, say, Flash Player 5 — or none at all, or JavaScript disabled — the original content of the <div> element is displayed.

Let’s say you’ve got some nifty content that requires Flash Player 9,0,115,0, because it displays fullscreen video.  If your visitor doesn’t have the right version of Flash Player, you want to send that visitor to another page on your site that touts the benefits of Flash Player 9 (or whatever … you get the idea).  Here’s one way to do that:

<script type="text/javascript">
  var so;
  var flashVersion = deconcept.SWFObjectUtil.getPlayerVersion();
  if (flashVersion.major >= 9 && flashVersion.rev >= 115) {
    so = new SWFObject("Flash9Content.swf", "mymovie", "320", "240", "9.0.115", "#FFFFFF");
  } else {
    window.location = "someOtherPage.html";
  }
  so.write("flashcontent");
</script>

Here, the if statement checks both the major and rev properties.  Make sure to always check for greater than or equal to (>=), so that next year, when most of your visitors have Flash Player 10, everything will still fly without a hitch.  This time, the else clause sets the native JavaScript window.location property to another HTML document.  If the user doesn’t have 9,0,115,0 or higher installed — for example, has Flash Player 8 installed instead, or none — the browser will immediately go to someOtherPage.html.  If the user doesn’t have JavaScript enabled, the original <div> content will be displayed.  If all’s well, however, your user will see your SWF.

Leave a Reply