Cargando

Ir a contenido


 


HTML5 - Multimedia Embebido

En este tutorial ahondaremos sobre embeber contenido multimedia en nuestro documento HTML iniciando con la inclusión básica de un elemento de audio.


Escrito por el feb 02 2014 05:40


En HTML5 los elementos de video y de audio tienen muchos factores en común, por lo tanto el objeto HTMLMediaElement define las características básicas de cada uno en el DOM.

Los elementos de audio están representados por el objeto HTMLAudioElement, este objeto no representa ningún incremento en las funcionalidades del HTMLMediaElement, en el otro lado tenemos al objeto HTMLVideoElement que representa a los elementos de video y al contrario del objeto HTMLAudioElement este si supone algunas características adicionales sobre el HTMLMediaElement.

El elemento Audio

El elemento Audio nos permite embeber contenido de audio dentro de nuestros documentos HTML, es nuevo en HTML5 y puede contener los siguientes atributos: autoplay, preload, controls, loop, muted, src.

Veamos un ejemplo en código de como incluir un elemento de audio en nuestros documentos:

<!DOCTYPE HTML>
<html>
<head>
	 <title>Example</title>
</head>
<body>
	 <audio controls src="mytrack.mp3" autoplay>
		 Audio content cannot be played
	 </audio>
</body>
</html>


Notamos que tenemos una etiqueta <audio>, donde definimos el atributo controls para que podamos tener los botones que nos permiten manipular la reproducción del archivo, con src le indicamos la ruta al archivo de audio y por último autoplay, al estar presente indica que el archivo debe reproducirse al momento de cargar el documento.

Como vemos es algo bastante sencillo de manejar, veamos en la siguiente imagen como nos quedaría en nuestro navegador:



Obtener información de Multimedia

Como habíamos mencionado al inicio, con el objeto HTMLMediaElement tenemos agrupadas las características comunes de audio y video, y que en el caso de video se aumentaban algunas características adicionales.

La información que podemos obtener con este objeto es la siguiente:
  • autoplay nos indica si está habilitado o no la reproducción automática del archivo.
  • canPlayType(<type>) nos indica si el navegador está en capacidad de reproducir el archivo indicado.
  • currentSrc permite saber la fuente actual del archivo.
  • controls nos permite saber o establecer la presencia o no de los controles de reproducción sobre el archivo.
  • defaultMuted indica o establece si el archivo debe iniciar con el volumen totalmente en silencio.
  • loop indica o establece si el archivo debe repetirse en bucle.
  • muted baja el volumen del archivo
  • preload indica o establece que el archivo cargue antes de reproducirse al momento de cargar la página.
  • src indica o establece la ruta hacia el archivo multimedia.
  • volume establece o indica el volumen de la reproducción del archivo.
Como indicamos el elemento video tiene algunas características adicionales, veamos a continuación cuales son:
  • height indica o establece la altura.
  • poster indica o establece el valor del atributo poster con el cual podemos colocar una imagen de portada para el video
  • videoHeight indica o establece la altura del video.
  • videoWidth indica o establece el ancho del video
  • width indica o establece el ancho.
En el siguiente código veremos cómo podemos obtener información de dichos elementos y cómo podemos mostrarlos en nuestro documento para verlo en el navegador:

<!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">
		 <source src="timessquare.webm"/>
		 <source src="timessquare.ogv"/>
		 <source src="timessquare.mp4"/>
		 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 propertyNames = ["autoplay", "currentSrc", "controls", "loop", "muted",
								 "preload", "src", "volume"];
						 for (var i = 0; i < propertyNames.length; i++) {
			 tableElem.innerHTML +=
				 "<tr><td>" + propertyNames[i] + "</td><td>" +
				 mediaElem[propertyNames[i]] + "</td></tr>";
		 }
	 </script>
</body>
</html>


Para finalizar este tutorial veamos que nos muestra el navegador con este código:

¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado feb 02 2014 05:40
  •   Actualizado feb 02 2014 05:50
  •   Visitas 790
  •   Nivel
    Avanzado



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!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse