20. Audio y Video

Para audio y video existen sus respectiva etiquetas <audio></audio> para audio, y <video></video> para video.

<audio>

Veamos la sintaxis que hay que utilizar para mostrar un audio en nuestro documento.

Ejm

<audio src="miaudio.mp3" controls"></audio>

<video>

La sintaxis es muy parecida a <audio>, su sintaxis es la siguiente.

Ejm

<video src="mivideo.mp4" controls></video>

Nota: Ambas etiquetas son etiquetas en linea, y su diseño va a depender del navegador en el que nos encontremos.

Atributos

Existen algunos atributos que podemos utilizar en ambas etiquetas:

  • autoplay: lo que hace es que el audio comienza inmediatamente.
  • loop: lo que hace es que cuando acaba el audio, vuelve a reproducirlo, lo hace de manera indefinida.
  • mute: empieza el audio muteado, por lo que hay que ir al control de volumen para subirlo.
  • preload: lo que hace es precargar en el caché del navegador el track de audio, para que cargue lo antes posible. Recomendable incluirlo siempre en la etiqueta.
  • poster (solo para <video>): carga una imagen que queramos mostrar mientras el video no se reproduce.
Scroll al inicio