javascript - todos - que navegadores tienen compatibilidad con html

¿Cómo comprobar si el navegador soporta HTML5?

Question

EDITAR He cambiado un poco de Javascript ahora, así que si puedo encontrar una función javascript que detecte el soporte de video HTML5, debería funcionar.

Tengo un reproductor de video HTML5 que tiene flash backback, si HTML5 no es compatible, quiero que retroceda a flash. Actualmente estoy usando

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

¿Es posible hacer lo siguiente?

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

Tratando de encontrar una buena idea de solución fácil.

Por lo general, podría tener un <object> adicional en la etiqueta del video, pero esto no será posible debido a la forma en que se inserta el reproductor en la página.

Aunque puedo detectar el soporte de HTML5 con un método posiblemente poco confiable, no estoy seguro de cómo mi HTML se basa en el resultado del soporte

Answer 1

¿Has echado un vistazo a http://www.modernizr.com/docs/#features-css

Puede hacer detección de características.

Answer 2

Así es como lo hace w3schools:

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."
}
}

Answer 3

La mejor solución es usar algo como Modernizr para hacer la detección de características en el lado del cliente. Modernizr es una biblioteca de código fuente con licencia de JavaScript con licencia del MIT que detecta la compatibilidad con muchas características de HTML5 y CSS3. Si su navegador no admite la API de lienzo, la propiedad Modernizr.canvas será falsa.

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

Ref

Otra solución si está utilizando JQuery: comprobación de soporte para el elemento de lienzo 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

Ref

Answer 4

Revisa todo en Dive into HTML5, especialmente la sección "Detección de técnicas HTML5". Tiene casi todo lo que pueda necesitar.

Answer 5

Un cheque de línea ...

// Plain JavaScript
(typeof document.createElement(''canvas'').getContext === "function")
// Or... Using lodash
_.isFunction(document.createElement(''canvas'').getContext)