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

in audio HTML 5 video on by Gisela Torres

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:

    <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>

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:

<!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>

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

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

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:

  • audio/ogg; codecs=»vorbis»
  • audio/mp4; codecs=»mp4a.40.5″
  • audio/mp3; codecs=»mp3″

Espero que sea de utilidad.

¡Saludos!