Cuando trabajamos en web debemos asegurarnos que cada usuario tenga una experiencia satisfactoria en nuestra página, muchas veces esto implica tener que realizar código adicional o no tan eficiente, todo con la finalidad de que nuestra página no falle.
Con el nuevo estándar HTML tenemos los nuevos elementos de multimedia, como el audio y el video, ya que ambos poseen un origen común, podemos evaluar sus formatos y de esta manera saber si el navegador puede o no reproducir los archivos especificados.
Método canPlayType
El método canPlayType nos permite saber o tener una noción de si el navegador puede o no reproducir el archivo multimedia que le estamos indicando.
Al utilizar este método podemos tener 3 tipos de respuesta:
Aquí simplemente lo que hacemos es realizar dos arrays, en el primero colocamos los nombres de los archivos con diferentes extensiones, en el segundo colocamos los formatos que tenemos, una vez con eso recorremos el array de los formatos y entonces vamos evaluando con el método canPlaytype para así obtener la respuesta que necesitamos.
Hasta aquí todo va sobre ruedas, una vez que tenemos la evaluación preguntamos por el que haya devuelto la respuesta probably y ese es el que colocaremos para su reproducción.
Veamos cómo nos queda esto en el navegador:
En este ejemplo concreto utilizamos Firefox, en este caso el formato que puede reproducir el navegador es el webm y efectivamente es el que se muestra en el elemento correspondiente.
Como podemos ver, este método nos permite establecer varias opciones y si desarrollamos nuestro algoritmo correctamente, podemos realizar una funcionalidad bien robusta que nos permitirá disfrutar de las bondades de HTML5 en el manejo de multimedia en múltiples navegadores sin tener que preocuparnos por la experiencia del usuario.
Con esto finalizamos nuestro tutorial, teniendo el conocimiento ahora de como evaluar los diferentes formatos multimedia y como los navegadores pueden tratar cada uno.
Con el nuevo estándar HTML tenemos los nuevos elementos de multimedia, como el audio y el video, ya que ambos poseen un origen común, podemos evaluar sus formatos y de esta manera saber si el navegador puede o no reproducir los archivos especificados.
Método canPlayType
El método canPlayType nos permite saber o tener una noción de si el navegador puede o no reproducir el archivo multimedia que le estamos indicando.
Al utilizar este método podemos tener 3 tipos de respuesta:
- “” vacío esto nos indica que no puede reproducir el archivo en el formato especificado.
- maybe esta respuesta nos dice que tal vez se pueda reproducir el formato.
- probably con esta respuesta el navegador nos indica que hay probabilidades altas que pueda reproducir el contenido en el formato especificado.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
table {border: thin solid black; border-collapse: collapse;}
th, td {padding: 3px 4px;}
body > * {float: left; margin: 2px;}
</style>
</head>
<body>
<video id="media" controls width="360" height="240" preload="metadata">
Video cannot be displayed
</video>
<table id="info" border="1">
<tr><th>Property</th><th>Value</th></tr>
</table>
<script>
var mediaElem = document.getElementById("media");
var tableElem = document.getElementById("info");
var mediaFiles = ["timessquare.webm", "timessquare.ogv", "timessquare.mp4"];
var mediaTypes = ["video/webm", "video/ogv", "video/mp4"];
for (var i = 0; i < mediaTypes.length; i++) {
var playable = mediaElem.canPlayType(mediaTypes[i]);
if (!playable) {
playable = "no";
}
tableElem.innerHTML +=
"<tr><td>" + mediaTypes[i] + "</td><td>" + playable + "</td></tr>";
if (playable == "probably") {
mediaElem.src = mediaFiles[i];
}
}
</script>
</body>
</html>
Aquí simplemente lo que hacemos es realizar dos arrays, en el primero colocamos los nombres de los archivos con diferentes extensiones, en el segundo colocamos los formatos que tenemos, una vez con eso recorremos el array de los formatos y entonces vamos evaluando con el método canPlaytype para así obtener la respuesta que necesitamos.
Hasta aquí todo va sobre ruedas, una vez que tenemos la evaluación preguntamos por el que haya devuelto la respuesta probably y ese es el que colocaremos para su reproducción.
Veamos cómo nos queda esto en el navegador:
En este ejemplo concreto utilizamos Firefox, en este caso el formato que puede reproducir el navegador es el webm y efectivamente es el que se muestra en el elemento correspondiente.
Como podemos ver, este método nos permite establecer varias opciones y si desarrollamos nuestro algoritmo correctamente, podemos realizar una funcionalidad bien robusta que nos permitirá disfrutar de las bondades de HTML5 en el manejo de multimedia en múltiples navegadores sin tener que preocuparnos por la experiencia del usuario.
Con esto finalizamos nuestro tutorial, teniendo el conocimiento ahora de como evaluar los diferentes formatos multimedia y como los navegadores pueden tratar cada uno.
