Cómo comprobar si un navegador soporta un formato específico para HTML 5 audio/video

View as Markdown

Para todos los que hayamos trabajado con las etiquetas de audio y video de HTML 5, sabemos que dependiendo del navegador que estemos utilizando se está dando soporte a unos formatos u otros. Según avanzan las actualizaciones de dichos navegadores se amplía la oferta y, en ocasiones, llegamos a no saber qué es exactamente lo que soporta cada uno y qué no. La solución más sencilla es ofrecer una fuente por cada uno de los formatos más comunes como se explicaba en el post HTML 5 video tag:

[html] <video id="movie" controls autoplay>
<source src="http://html5stuff.blob.core.windows.net/videos/efecto_kinect/efecto_kinect.mp4" />
<source src="http://html5stuff.blob.core.windows.net/videos/big_buck_bunny.theora.ogv" />
<source src="http://html5stuff.blob.core.windows.net/videos/efecto_kinect/efecto_kinect.webmvp8.webm" />
</video>
[/html]

Sin embargo, existe un método llamado canPlayType() con el que podemos recuperar esta información.

canPlayType

Su forma de uso es la siguiente: recuperamos el objeto video/audio y utilizamos el método canPlayType pasándole como parámetro el tipo que queremos comprobar:

[html]<!DOCTYPE html>
<html>
<head>
<title>canPlayType</title>
</head>
<body>
<video id="movie" controls>
<source src="http://html5stuff.blob.core.windows.net/videos/efecto_kinect/efecto_kinect.mp4" />
<source src="http://html5stuff.blob.core.windows.net/videos/big_buck_bunny.theora.ogv" />
<source src="http://html5stuff.blob.core.windows.net/videos/efecto_kinect/efecto_kinect.webmvp8.webm" />
</video>
<ul id="support"></ul>
<script>
window.onload = function () {

var objVideo = document.getElementById(‘movie’);

var types = [
‘video/ogg’,
‘video/mp4’,
‘video/webm’
];

var liElements = »;
for (var type in types) {
liElements += ‘<li><strong>’ + types[type] + ‘</strong>: ‘ + objVideo.canPlayType(types[type]) + ‘</li>’;
}

document.getElementById(‘support’).innerHTML = liElements;
};
</script>
</body>
</html>
[/html]

También es posible indicar los codecs además del tipo. Siguiendo el ejemplo anterior, modificamos el array types con lo siguiente:

[js] var types = [
‘video/ogg; codecs="theora, vorbis"’,
‘video/mp4; codecs="avc1.4D401E, mp4a.40.2"’,
‘video/webm; codecs="vp8.0, vorbis"’
];
[/js]

El resultado de esta función es un string que puede tener los siguientes valores:

«maybe»: Indica que podría estar soportado el formato. Este valor sólo lo devuelve cuando indicamos únicamente el tipo, sin el codec.
«probably»: Cuando utilizamos tanto el tipo como el codec asociado volvemos la consulta más específica. En el caso de ser soportado devolverá este valor.
«»: Una cadena vacía significa que no está soportado por el navegador.

En el caso del audio, los tipos más comunes son los siguiente: