Flash Article

JavaScript Flash Player Detection and Embedding with SWFObject

How SWFObject Works

Using SWFObject is easy. Simply include the JavaScript file called swfobject.js and then use a small amount of JavaScript on your page to embed your Macromedia Flash content.

The following example shows the minimum amount of code you need to embed a SWF:

<script type="text/javascript" src="swfobject.js"></script>

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

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");  
   so.write("flashcontent");
</script>

The following sections describe what this code does.

Holding the SWF

<div id="flashcontent">[...]</div>

This part prepares an HTML element that holds the SWF. The content placed in the "holder" element is replaced by the Flash content so that users who have Flash Player installed will never see the content inside this element.

Alternate content can be any combination of HTML and images—whether it's a message to your users who don't have Flash Player installed or simply alternate HTML content. This feature has an added bonus of letting search engines index your alternate content. For a more detailed look at how SWFObject can help your search engine ranking, read my blog posting about Flash and search engine optimization.

Passing in the Parameters

var so = new SWFObject(swf, id, width, height, version, bgcolor);

This code creates a new SWFObject file and passes in the following required parameters:

• swf: File path and name to your SWF file.
• id: ID of your object or embed tag. The embed tag will also have this value set as its name attribute for SWF files that take advantage of swliveconnect (used for JavaScript communication, replaced by ExternalInterface in Flash 8).
• width: Width of your SWF.
• height: Height of your SWF.
• version: Required player version for your Flash content. This can be a string in the format of "majorVersion.minorVersion.revision" (example: "6.0.65") or you can just require the major version (example: "6").
• background color: Hex value of the background color of your SWF.

Optional parameters include the following:

• useExpressInstall: If you would like to upgrade users using the Express Install feature, use true for this value.
• quality: This is the quality at which you wish to play your Flash content. If you specify no quality, the default is high.
• xiRedirectUrl: If you would like to redirect users who complete the Express Install upgrade, you can specify an alternate URL here.
• redirectUrl: If you wish to redirect users who don't have the correct Flash Player version, use this parameter and they will be redirected.

• detectKey: This is the URL variable name that SWFObject looks for when bypassing the detection. Default is detectflash.

  For example, to bypass Flash detection and simply write the SWF to the web page, you could add ?detectflash=false to the URL of the document containing the Flash content.

Writing the Flash Content to the Page

so.write("flashcontent");

This code tells the SWFObject script to write the Flash content to the page—assuming the correct version of the player is installed on the user's system—by replacing the content inside the specified HTML element.

Behind-the-Scenes Detection

SWFObject works quietly in the background of your HTML document. When developing pages that use SWFObject, you should start with your alternate (non-Flash) content first. After you get your pages working without your SWFs, incorporate them with little JavaScript snippets that replace your alternate content with the Flash content. This ensures that the alternate content will be indexed by search engines and that users without Flash Player will still see a working HTML page.

Whether you provide upgrade instructions or not is up to you. If your alternate content suffices, there may be no reason at all to tell people they are missing out on any Flash content.

SWFObject works in all the current web browsers in Windows, including Microsoft Internet Explorer 5, 5.5, and 6; Netscape 7 and 8, Firefox, Mozilla, and Opera. SWFObject also works in the following web browsers in Mac OS: Internet Explorer 5.2, Safari, Firefox, Netscape 6 and 7, Mozilla, and Opera 7.5+. It should continue to work well into the future.

SWFObject will also allow your users to interact with your Flash content without having to first "activate" it. For more information about the Internet Explorer / Eolas patent dispute and the recent Internet Explorer Active Content patch, visit the Active Content Developer Center.

SWFObject can detect minor versions and revision versions of Flash Player as well, simply by passing the string value of the version you want. An example requiring Flash Player v.6.0 r65 (or 6,0,65,0) would be as follows:

var so = new SWFObject("movie.swf", "mymovie", "200", "100", "6.0.65", "#336699");

Bypassing SWFObject

You can bypass the built-in plug-in detection of SWFObject. If for some reason the plug-in detection fails on a user's system, you can include a bypass link that disables the detection built into SWFObject and always writes the Flash content to the page.

To use this bypass, simply link to the page with your Flash content on it and include a single URL variable called detectflash and set it to false. Here is an example of what that link would look like:

<a href="mypage.html?detectflash=false">Bypass link</a>

Page 2 of 5

Previous Page

Next Page