Question

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?

Answer 1

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
   }