0

Can someone help me figure out how to build a fallback setup? I need to insert an HTML5 animation into a webpage via iframe, and if the browser doesn't support HTML5, I need it to play a Flash animation. If the browser doesnt support HTML5, and the proper version of Flash is not installed, I need it to just show a jpeg.

Can this be achieved via User Agent? I can't get this done by using conditional statements, because conditional statements only check if the user is using IE, and IE10 "supports" HTML5 (i use quotes sarcastically, IE10 does quite well in fact. I'm simply not used to having good things to say about IE, but I digress)

Any thoughts?

1 Answers1

0

You have two pretty good choices:

  1. HTML. HTML automatically ignores tags it doesn't understand, so nest tags to accomplish what you'd like:

    <canvas>
        <!-- stuff that works for canvas -->
        <object class="flash-etc">
            <!-- flash parameters -->
            <img src="/the/jpg" />
        </object>
    </canvas>
  1. JavaScript. Use Modernizr (http://modernizr.com/) to detect presence of features. Detecting browser maker and version is very, very fragile. Don't do it. Instead detect presence of the target feature and act accordingly. The search term is called "polyfill"

    if ( Modernizr.canvas ) {
        // html5 here
    } else if ( /*test for flash */ ) {
        // flash init here
    } else {
        // img here
    }
    
franzlorenzon
  • 5,845
  • 6
  • 36
  • 58
robrich
  • 13,017
  • 7
  • 36
  • 63
  • I'm going to try modernizr now. I like that a lot more. However, what is the reason why detecting browsers can be problematic? – Nick Passaro Sep 12 '12 at 15:45
  • Detecting the browser type or version presumes a few things that don't always hold true like the browser hasn't implemented it in a later version or the browser isn't lying (Opera claiming to be IE). Detecting presence of the feature always gives you the right answer. – robrich Sep 12 '12 at 20:25