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

Kasper

There is not a 1:1 mapping between browsers that support one arbitrary feature introduced in HTML 5 and another arbitrary feature introduced in HTML 5. Testing navigator.geolocation to see if the browser will support your video is a terrible idea. – Testaceous

That's why I don't want to use it/ – Kasper

i have the same question if any one get the answer – Unguarded

Answer 1

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

It can do feature detection

Frankhouse

Thanks, I made a JS method to do it, but seems that Modernizr is just..... better – Kasper

but how can we use this modernizer can you give some example code – Unguarded

@404 - See modernizrs HTML feature detection here: modernizr.com/docs/#features-html5. For example, if you wanted to check if the HTML5 canvas was supported you would do if(Modernizr.canvas){ ... You may also want to look at HTML5 Shiv's for mocking HTML5 in older browsers. – Kasper

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

Endoergic

Or for bonus points, use the YEPNOPE addin within Modernizr, then load up excanvas if it's not supported :) – Kasper

Answer 3

One liner check...

// Plain JavaScript
(typeof document.createElement('canvas').getContext === "function") 

// Or... Using lodash
_.isFunction(document.createElement('canvas').getContext)

Aeniah

Answer 4

Check out everything at Dive into HTML5 especially the 'Detecting HTML5 Techniques' section. It has pretty much everything you may need.

Swashbuckler

Answer 5

Here is how w3schools does it:

function checkVideo()
{
if(!!document.createElement('video').canPlayType)
  {
  var vidTest=document.createElement("video");
  oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
  if (!oggTest)
    {
    h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
    if (!h264Test)
      {
      document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
      }
    else
      {
      if (h264Test=="probably")
        {
        document.getElementById("checkVideoResult").innerHTML="Yeah! Full support!";
        }
      else
        {
        document.getElementById("checkVideoResult").innerHTML="Meh. Some support.";
        }
      }
    }
  else
    {
    if (oggTest=="probably")
      {
      document.getElementById("checkVideoResult").innerHTML="Yeah! Full support!";
      }
    else
      {
      document.getElementById("checkVideoResult").innerHTML="Meh. Some support.";
      }
    }
  }
else
  {
  document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
  }
}

Perennate

W3Schools suck. Just sayin'. – Steels