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:
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:
Para finalizar este tutorial veamos que nos muestra el navegador con este código:
![html5_mult_emb2.jpg]()
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.
- 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.
<!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:
