Etiquetas audio y video de html5

Etiquetas audio y video de html5

Print Friendly, PDF & Email
Valora esta entrada

HTML5 incorpora las etiquetas <audio> y <video> que sustituyen a la tradicional etiqueta <object> para la inserción de documento multimedia en un documento web.

Su uso es relativamente sencillo sin embargo en ocasiones es difícil recordar los atributos que pueden acompañar las etiquetas <audio> y <video>.

Veamos 2 pequeños resúmenes con los atributos más usados.

Etiqueta audio y ejemplo de uso

<!-- 
ATRIBUTO		VALOR		DESCRIPCIÓN
********	*********	*************
autoplay	autoplay	Especifica que el audio se reproducirá en cuanto esté cargado.
controls	controls	Especifica que los controles de audio se deben mostrar (inicio, pausa, ...)
loop		loop		Especifica que el audio se reproducirá en bucle ininterrumpidamente.
muted		muted		Especifica que la salida de audio debe ser silenciada.
preload		autoplay	Especifica si al cargarse la página debe empezar a reproducirse automáticamente.
			metadata
			none	
src			URL			Especifica la dirección URL del archivo de audio
 -->

Ejemplo de uso de la versión extendida

<audio controls>
<source src="audio/0802.mp3" type="audio/mp3"></source>
<source src="audio/0802.ogg" type="audio/ogg"></source>
<p>Tu navegador no soporta la etiqueta audio de htmll5</p>
</audio>

Versión reducida

<audio width="600px" src="audio/0802.mp3" controls></audio>

Etiqueta video y ejemplo de uso

<!-- 
ATRIBUTO		VALOR		DESCRIPCIÓN
********	*********	*************
autoplay	autoplay	Especifica que el audio se reproducirá en cuanto esté cargado.
controls	controls	Especifica que los controles de audio se deben mostrar (inicio, pausa, ...)
loop		loop		Especifica que el audio se reproducirá en bucle ininterrumpidamente.
muted		muted		Especifica que la salida de audio debe ser silenciada.
preload		autoplay	Especifica si al cargarse la página debe empezar a reproducirse automáticamente.
			metadata
			none	
src			URL			Especifica la dirección URL del archivo de audio
 -->

Ejemplo de uso de la versión extendida

<video width="600px" controls>
<source src="video/sintel.mp4" type="video/mp4"></source>
<source src="video/sintel.ogg" type="video/ogg"></source>
<source src="video/sintel.webm" type="video/webm"></source>
<p>Tu navegador no soporta la etiqueta video de html5</p>
</video>

Versión reducida

<video width="600px" src="video/sintel.mp4" controls></video>

¡Hola!

Querido lector,

Espero que estos apuntes te puedan resultar de utilidad. ¡Yo los tengo bien guardados en una carpeta de mi ordenador y siempre que necesito consutlarlos allí están!

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.