« New O’Reilly Title, Coming Soon!
How to Position Dynamically Loaded Content Based on Browser Resizing »

Using SWFObject for More than Just Embedding SWFs

Flash Web Development

My favorite mechanism for embedding SWFs, hands down, is Geoff Stearns’ SWFObject.  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.

This entry was posted on Wednesday, March 12th, 2008 at 11:48 pm and is filed under Flash, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

12 Responses to “Using SWFObject for More than Just Embedding SWFs”

  1. Davel_x Says:
    March 13th, 2008 at 10:47 am

    The next version (2.0) of SWFObject [http://code.google.com/p/swfobject/] is quite different from the 1.5 so you won’t be able to juste re-use your code with the new js file but it has some new interesting features like some callback Events…

    One thing that I had to handle with SWFObject (2.0 but I think it’s the same with 1.5) is that the content of the replaced div is not only hidden but removed. So if you want to use this content to feed the Flash with some data, you have to collect it “before” using the replacement method.

  2. Justin_P Says:
    March 14th, 2008 at 10:08 pm

    The other nice thing is that SWFAddress (http://www.asual.com/swfaddress/) utilizes SWFObject and adds to the possibilities even further.

  3. David Stiller Says:
    March 15th, 2008 at 7:37 pm

    To Davel_x …

    I haven’t used 2.0 yet, though I’ve done some reading up on it. It definitely looks different! Thanks for bringing it up, though. I certainly should get to know it better.

    To Justin_P …

    Ha, same goes for SWFAddress! Looks like I’ve got some research to do. Thanks for both of these replies!

  4. aminur rahman aka tom rahman Says:
    March 16th, 2008 at 6:00 am

    very nice article, this is the first time i read something about swfObject and internet explorer issues.

  5. Molecula Says:
    March 27th, 2008 at 9:07 am

    SWFAddress is a small, but powerful library that provides deep linking for Flash and Ajax….

    SWFAddress & SWFObject are different things, they do different jobs.

  6. David Stiller Says:
    April 3rd, 2008 at 9:40 pm

    Molecula,

    Thanks for the clarification.

  7. Kitster79 Says:
    April 9th, 2008 at 8:16 pm

    Thanks David. This was very helpful. I need to start using this.

    So when you see sites like this (http://www.kitwilkins.com/parkcityproperties.html) which throw up a quick flash of white where the swf is waiting to load into, is it because they are not using the SWFobject to embed swfs? This has always bugged me.

    Did that make sense?:)

  8. David Stiller Says:
    April 10th, 2008 at 2:04 pm

    Kitster79,

    I don’t think the white flash (no pun intended) is happening because of the traditional <object>/<embed> approach. You might have a preloader issue going on, but I do notice you’re not supplying a default color in your <object>/<embed> tags (bgcolor attribute). I recommend you use SWFObject (or something like it), just so you can provide alternate, indexable content, but even if you choose not to, see if adding bgcolor attribute helps.

  9. Kitster79 Says:
    April 24th, 2008 at 11:24 am

    David,

    How do I make a swf stretch to fill the browser window using the swfObject method?
    I tried changing the swfObject size to “100%’, “100%”, but that just positioned it in the top left corner (cutting it off for some reason).

    The code I have usually used for this can be seen here http://www.hideaway-ludington.com/ but I now would like to achieve the same results using the swfObject to embed my swfs.

    Could you show me how?

    Thanks

    Kit

  10. David Stiller Says:
    April 25th, 2008 at 3:12 pm

    Kit,

    I use 100% for width and height, just like you did. That works for me! If you can show your HTML, that might help.

  11. Adrian Parr Says:
    July 15th, 2008 at 7:41 am

    Hi David,

    Thanks for this David, but do you know how to jump to an alternative HTML page using version 2.0 of SFWObject? I’ve had a look through the SFWObject website but can’t see it mentioned anywhere.

    Cheers,

    Adrian

  12. sanruiz Says:
    August 6th, 2009 at 7:47 pm

    I try to 100% h 100%w
    with minimal h and minimal w.
    if the screen is 600×800. show scroll bars. ..
    like swfIN.js

    Tnks

Leave a Reply