HTML5 ofrece características nuevas muy potentes como el elemento <canvas>, un lienzo en donde dibujar o las opciones de geolocalización o el elemento <video> que hace obsoleto el uso de plugins de terceras partes para mostrar un video.
Lo bueno es que gracias al soporte que ofrecen los navegadores más modernos, ya podemos comenzar a desarrollar con HTML5. Detectar que soporte nos frece el navegador es bastante sencillo. A continuación, tres ejemplos para detectar el soporte para: geolocalización, canvas y video.
Cómo detectar soporte para geolocalización
Si el navegador soporta la API de de geolocalización, entonces habrá una propiedad geolocalization en objeto global navigator:
function supports_geolocation() {
return !!navigator.geolocation;
}
Cómo detectar soporte para canvas
Si el navegador soporta la API canvas, en el DOM habrá un objeto canvas con el método getContext():
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}
Cómo detectar soporte para formatos de video
Si el navegador soporta video HTML5, en el DOM habrá un un elemento <video> que tendrá el método canPlayType(). Éste método dirá si el navegador soporta un formato de video en particular.
En el siguiente ejemplo, se comprueba el soporte para el formato de video utilizado en Macs y iPhones.
function supports_h264_baseline_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}
Fuente | diveintohtml5.info