poindexter
poindexter

Reputation: 193

Showing image in place of flash to iphones and ipads

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','<?php bloginfo('template_directory');?>/images/featurePanel','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','<?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

Upvotes: 0

Views: 1673

Answers (4)

Umesh Bagalur
Umesh Bagalur

Reputation: 321

Using JavaScript User Agent detection things can be manipulate something like below example:



    if((navigator.userAgent.match(/iPad/i) != null) || (navigator.userAgent.match(/iPhone/i) !=null) || (navigator.userAgent.match(/iPod/i) != null)){    
// Write your logic    
}


Upvotes: 0

Sixten Otto
Sixten Otto

Reputation: 14816

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

Upvotes: 2

Stephen P
Stephen P

Reputation: 14800

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.

Upvotes: 0

Greg W
Greg W

Reputation: 5239

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
}

Upvotes: 0

Related Questions