web-dev-qa-db-fra.com

Comment vérifier si le navigateur prend en charge HTML5?

EDIT J'ai changé du Javascript maintenant, donc si je peux trouver une fonction javascript qui détecte le support vidéo HTML5, il devrait fonctionne.

J'ai un lecteur vidéo HTML5 qui a un repli flash, si HTML5 n'est pas pris en charge, je veux qu'il se replie sur flash. J'utilise actuellement

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

Est-il possible de faire ce qui suit:

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

Essayer de trouver une bonne idée de solution facile.

Habituellement, je pourrais avoir un <object> Supplémentaire dans le tag vidéo, mais cela ne sera pas possible en raison de la façon dont le lecteur est inséré dans la page.

Même si je peux détecter le support HTML5 avec une méthode éventuellement peu fiable, je ne sais pas comment avoir mon HTML basé sur la sortie du support

javascriptjqueryhtmlbrowserswfobject
24
JustAnotherDeveloper

Avez-vous jeté un œil à http://www.modernizr.com/docs/#features-css

Il peut faire la détection de fonctionnalités

19
Manatok

La meilleure solution consiste à utiliser quelque chose comme Modernizr pour effectuer votre détection de fonctionnalités côté client.Modernizr est une bibliothèque JavaScript open source sous licence MIT qui détecte la prise en charge de nombreuses fonctionnalités HTML5 et CSS3. Si votre navigateur ne prend pas en charge l'API Canvas, la propriété Modernizr.canvas sera fausse.

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

Réf

Une autre solution si vous utilisez JQuery: Vérification de la prise en charge de l'élément canvas de 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

Réf

9
user1653896

Un liner check ...

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

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

Découvrez tout sur Plongez dans HTML5 en particulier la section 'Détection des techniques HTML5'. Il a à peu près tout ce dont vous pourriez avoir besoin.

4
mattl