HTML5 Falls back to Flash, which in turn falls back to JPG

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?

Answers


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
    }
    

Need Your Help

Stopping PHP script putting URL's in address bar?

php

I have a script that pulls in meta data from a list of URL's but when I try to out too many it it says URL is too long and wont run.

Handling large number of clickable rows

java android onclicklistener

I'm working on an Android project that has quite a few screens with upwards of 200 rows that will be clickable per screen. The issue I am trying to figure out is how to make them all able to be cl...