Showing image in place of flash to iphones and ipads

Question

Edited // I want to detect flash support (not user string agent) on load and if the visitor is viewing on a device that does not support flash (changed from iPhone or iPad) I want to display this code:

<?php get_header(); ?>

<div class="flash">
<img src="/wp-content/themes/iq-iphone/main-page-image.png"/>
</div>

If it's a regular visitor I want to display this code:

<?php get_header(); ?>

<div class="flash">
<script type="text/javascript">
    AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','924','height','316','src','&lt;?php bloginfo('template_directory');?>/images/featurePanel','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','&lt;?php bloginfo('template_directory');?>/images/featurePanel','wmode','transparent' ); //end AC code
    </script>
    <noscript>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="924" height="316">
        <param name="movie" value="<?php bloginfo('template_directory');?>/images/featurePanel.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <embed src="<?php bloginfo('template_directory');?>/images/featurePanel.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="924" height="316"></embed>
      </object>
     </noscript>
</div>

Any ideas? Thanks!

[1]: http://testing html

Answer 1

My understanding is that the iPad or iPhone UA strings look something like this:

Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

So in theory, the following might do the trick:

if(preg_match("/iPhone|iPad/", $_SERVER['HTTP_USER_AGENT']) == 1)
{
  //echo out the image code
}
else
{
  //echo out the flash code
}

Answer 2

Adobe's site demonstrates Flash Player Detection at http://www.adobe.com/support/flash/how/shock/javaplugs/javaplugs04.html

Sniffing the user agent string (doing browser detection) is generally a bad idea (http://www.quirksmode.org/js/support.html) -- you want to detect specific support instead. What happens to your site when the iPad/iPhone magically starts supporting flash? You will needlessly punish those users until you remove the browser sniffing code.

If you test for capabilities instead you will show the image for anyone that doesn't have flash, not just i(Pad|Phone) users, and you'll show the flash to anyone who starts supporting it.

Answer 3

SWFObject is a small JavaScript library meant to solve this exact problem. There are a number of tutorials linked from their project wiki.