05 Dic Etiquetas audio y video de html5
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>Aviso importante autoplay policy de Google
Desde abril de 2018 Chrome ha modificado su autoplay policy.
Con el navegador chrome el atributo autoplay ha sido desactivado de no ser que en las configuraciones (preferencias) de chrome se modifique expresamente.
¡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 consultarlos allí están!
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
No Comments