How to Check if the browser supports HTML5?

Question

EDIT I have changed some Javascript now, so if I can find a javascript function that detects HTML5 Video support, it should work.

I have a HTML5 video player that has flash fallback, if HTML5 isnt supported, I want it to fallback to flash. Im currently using

<!--[if !IE]><!--> then load my custom player else use SWFObject to render it.

Is it possible to do the folllowing:

`  If (HTML5 supported browser) {  <some html and script>  (My custom player) }else{   <different html and script> (I would call  SWFobject here) } ` 

Trying to find a nice easy solution idea.

Usually I would be able to have an additional <object> in the video tag, but this won't be possible due to the way the player is inserted into the page.

Even though I can detect HTML5 support with a possibly unreliable method, I'm not sure how to have my HTML based on the output of the support

Answer 1

Have you had a look at http://www.modernizr.com/docs/#features-css

It can do feature detection

Answer 2

The better solution is to use something like Modernizr to do your feature detection on the client-side.Modernizr is an open source, MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 features. If your browser does not support the canvas API, the Modernizr.canvas property will be false.

if (Modernizr.canvas) {   // let's draw some shapes! } else {   // no native canvas support available :( } 

Ref

Another solution if you are using JQuery: Checking for support for the canvas element of HTML 5

var test_canvas = document.createElement("canvas") //try and create sample canvas element var canvascheck=(test_canvas.getContext)? true : false //check if object supports getContext() method, a method of the canvas element alert(canvascheck) //alerts true if browser supports canvas element 

Ref