Cargando

Ir a contenido

X


Ver Más! Unir varios PDF en uno en Windows 10 nunca fue tan fácil! Sigue los pasos con PDFelement y estará listo en un abrir y cerrar de ojos.


 


Reproducción de Multimedia en HTML5

En este tutorial veremos como verificar la capacidad del navegador de reproducir un formato, con esto podremos tener información que nos permitirá saber si debemos emplear algún código adicional o modificar el multimedia en pro de que nuestros usuarios puedan ver bien nuestra página.


Escrito por el feb 02 2014 05:49


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:
  • “” 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.
Veamos a continuación un código donde empleamos este método sobre un archivo multimedia:

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



html5_reprod_mult.jpg


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.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0

Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado feb 02 2014 05:49
  •   Actualizado feb 03 2014 01:20
  •   Visitas 697
  •   Nivel
    Profesional