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
<head> element of any page that intends to use it.
Naturally, the src attribute of that
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>
<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>
That part is handled like this.
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
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:
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:
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
<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:
if statement checks both the
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
<div> content will be displayed. If all’s well, however, your user will see your SWF.