Etiquetas audio y video de html5

Etiquetas audio y video de html5

Print Friendly, PDF & Email
Etiquetas audio y video de html5
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!

Entradas relacionadas:

Introducción al HTML
- 527
El HTML es un lenguaje de marcado que constituye uno de los pilares de la web. Es un idioma que se caracteriza por etiquetar el contenido de una página web. El HTML nos ayuda a conferir contenido y es...
Como indicar a Google la modificación y corrección de contenidos mediante html
- 60
Cuando escribes contenidos en Internet es inevitable cometer errores. ¿Sabes como corregirlos semánticamente para que los navegadores se enteren de que has escrito una corrección o actualización?
Qué es un favicon y para que sirve
- 101
¿Eres de los que se fija en todos los detalles de una página web cuando navega? Entonces el favicon es para ti. En esta entrada te explico que es y para que sirve.
Etiquetas xmp, pre y code en HTML
- 690
Tratamos las etiquetas que permiten preformatear el texto de un documento web. Como se escriben, para que sirven y sus peculiaridades con un ejemplo práctico. Veréis el código html y el resultado por ...
Enlaces en html: la etiqueta a
- 151
La web sería muy distinta a como la conocemos hoy de no ser por Tim Berners-Lee y la invención en 1989 de la etiqueta enlace. El hipervínculo hizo posible incorporar a documentos estructurados y marca...
Factores que afectan al tiempo de carga de una página web
- 255
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Resumen de como comentar código en html, css y javascript
- 311
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
Anclas html
- 423
Anteriormente hemos visto que es un enlace y como se construye mediante una etiqueta y cuales son los atributos más importantes que lo acompañan. Hoy vamos a ver una de las utilidades más prácticas d...
Resumen de atributos html para ayudarnos a memorizar
- 194
En esta entrada hago un ejercicio mental repasando el conjunto de atributos típicos usados en HTML. ¿Cuantos dirías que salen? ¿20, 30, 40, más?
Validadores de código HTML y CSS
- 383
Incluso los programadores y diseñadores más experimentados cometen errores de sintaxis o vocabulario picando código en lenguaje html, css, javascript y cualquier otro lenguaje de programación. Nos pas...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.