Information Resources & Technology (IRT)–

Flash Plug-in Detection

Other methods

Looking for the older method checkFlash.js documentation?

To use this help file, you should be comfortable with editing your page's code with Dreamweaver. Contact Web Help if you need assistance.

When users without the proper Flash Player plugin view a page with Flash objects, they typically see warnings, alerts, and broken-looking content. Whenever a Flash object, including Flash Video players, is embedded on a page, plug-in detection should be used to ensure the user has a pleasant and useful experience. Plug-in detection allows you to provide alternate content for those users who don't yet have the plugin.

Dreamweaver defaults

Note: Users who place Flash objects on pages with Dreamweaver's Insert Media button will find that Dreamweaver outputs a series of scripts and SWF files which must be put to the server with the page for the embed to function. The following method uses similar scripts, but has been customized for this server.

How to do it

Step 1: Copy the following code and paste it into the editable area of your document's head code. Look for the comment "<!-- PUT SUPPLEMENTAL STYLES AND SCRIPTS HERE -->" and paste the code after the comment.

<script type="text/javascript" src="/Templates/swfobject.js"></script>
<script type="text/javascript">swfobject.registerObject("bannerFlash", "9.0.0");</script>

Step 2: Copy the following code and paste it into the code of your page, wherever you want the object to appear.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="520" height="346" id="flashOject"> <param name="movie" value="flashObjectFileNameHere.swf" /> <param name="wmode" value="opaque" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="flashObjectFileNameHere.swf" width="520" height="346"> <param name="wmode" value="opaque" /> <!--<![endif]--> <div class="boxitem"><h4 align="center"><br/><br/><a href="http://www.adobe.com/go/getflashplayer" target="_blank" class="link_nounderline">For an enhanced experience, get the free flash player</a><br/><br/></h4></div> <!--[if !IE]>--> </object> <!--<![endif]--> </object>

Step 3: Modify the source code for your instance

  1. Update the width from 520 to the actual width of your Flash object; there are two references
  2. Update the height from 346 to the actual height of your Flash object; there are two references
  3. Update the name of the flash object file from flashObjectFileNameHere.swf to the actual name of your Flash object file; there are two references
  4. Optional: Change the object's ID from flashOject to your preferred ID

Step 4: Save, put and test your page in the browser.

Step 5: Test your installation in a browser. It's helpful to have two different browsers, one with the Flash plug in installed, and the other without, so you can test both positive and negative plug in detection. You can obtain a free tool to uninstall the Flash plug-in from the Adobe site for this purpose.

Optional Step 6: It's a great idea to provide more useful alternate content than the default box and link to the Flash Player download site. A typical approach is to prepare an image with similar content and the same size as the Flash object. You may want to do a screen capture of a key Flash screen to create your alternate image -- Command-Shift-3 or 4 on the Mac, Print Screen followed by pasting into an image editor on the PC. This is especially helpful for mobile users and others who don't or can't have the Flash Player.

Replace the code "<div class="boxitem"><h4 align="center"><br/><br/><a href="http://www.adobe.com/go/getflashplayer" target="_blank" class="link_nounderline">For an enhanced experience, get the free flash player</a><br/><br/></h4></div></a>" with your own alternate code.

Here's the more elaborate code for a streamed video, as used in the above demo:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="240" height="180" id="FLVPlayer"> <param name="movie" value="http://http.vitalstreamcdn.com/flashskins/FLVPlayer.swf" /> <param name="align" value="" /> <param name="salign" value="LT" /> <param name="quality" value="high" /> <param name="scale" value="showall" /> <param name="FlashVars" value="&bgColor=0xFFFFFF&serverName=stanfordmed.flashsvc.vitalstreamcdn.com&appName=stanfordmed_vitalstream_com/_definst_&streamName=mednews_firenobel&autoPlay=true&skinName=http://http.vitalstreamcdn.com/flashskins/clearSkin_2&bufferTime=3&autoRewind=true" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="http://http.vitalstreamcdn.com/flashskins/FLVPlayer.swf" width="240" height="180"> <param name="align" value="" /> <param name="salign" value="LT" /> <param name="quality" value="high" /> <param name="scale" value="showall" /> <param name="FlashVars" value="&bgColor=0xFFFFFF&serverName=stanfordmed.flashsvc.vitalstreamcdn.com&appName=stanfordmed_vitalstream_com/_definst_&streamName=mednews_firenobel&autoPlay=true&skinName=http://http.vitalstreamcdn.com/flashskins/clearSkin_2&bufferTime=3&autoRewind=true" /> <!--<![endif]--> <div class="boxitem"> <h4 align="center"><br/> <br/> <a href="http://www.adobe.com/go/getflashplayer" target="_blank" class="link_nounderline">For an enhanced experience, get the free flash player</a><br/> <br/> </h4> </div> </a> <!--[if !IE]>--> </object> <!--<![endif]--> </object>

See also:
Convert/Encode Flash Video | Install Video w/ Dreamweaver | Flash Audio Player

Stanford Medicine Resources:

Footer Links: