0

I have a requirement where I can add both flash and embed HTML5 app on page. But HTML5 app is not supported on many browsers. What I want to do is to check at runtime if the HTML5 app is not working fine, then show Flash File. But I don't know how can I check at run time whether my app is displaying anything or not. I have embedded the HTML5 code through following code in user-control:

<embed src='<fully qualified html5 app link>' height="<height>" width="<width>" />
Ross Cooper
  • 245
  • 2
  • 10
  • 20
  • Have a test browser on a vm that doesn't support HTML 5? – Paddy Dec 27 '13 at 07:48
  • There is few tools to test whether html5 element is supported on current page load. I'm using `modernizr` to check it, and could work as `if-else`. – Damaged Organic Dec 27 '13 at 09:13
  • @Paddy: Yes. It's not working on any browser except chrome. FF shows plugin missing and IE shows a blank space with no error. – Ross Cooper Dec 27 '13 at 09:31
  • @grimv01k: Can u please explain a bit more on how to get this tool and usage? – Ross Cooper Dec 27 '13 at 09:32
  • Just google it, it's simple. I've posted a comment instead of detailed answer because I'm not sure what kind of app you are using and can you actually check that app 'outside' of it. – Damaged Organic Dec 27 '13 at 10:03

1 Answers1

1

The process of checking for supported functionality at runtime is often referred as "feature detection". Modernizr is one popular JavaScript library that provides such "feature detects": http://modernizr.com/

For example, let's start with the HTML you suggested, and add an id attribute for convenience:

<embed id="fancy" height="<height>" width="<width>" />

If you wanted to use HTML5 Canvas, for example, but had to fall back to a Flash alternative in non-Canvas browsers, you could do something like this (in JavaScript, with Modernizr):

if (Modernizr.canvas) {
    // TODO: do whatever it is you want to do with Canvas
} else {
    // hook up your embed to the fallback Flash component
    document.getElementById('fancy').src = 'url/for/flash/component.swf';
}

HTML5 covers loads of functionality. The precise "detect" required will vary based on your requirements, but Modernizr makes most of this quite simple.

jokeyrhyme
  • 3,258
  • 2
  • 20
  • 20