Saltar al contenido principal

🔊 Audio y video en HTML

Audio​

Insertar audio en HTML es muy sencillo. La etiqueta que vas a utilizar es la etiqueta audio, y su implementación es la siguiente:

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

En el código anterior, se indica con el atributo src la ruta del archivo de audio. Y con el atributo controls se especifica al navegador que deben mostarse los controles de manejo del audio, como play, pause y volume.

También puedes insertar audios de respaldo, es decir, un segundo audio que se reproduce si el primer no puede reproducirse.

Audio de respaldo​

Si necesitas insertar un audio de respaldo, se tiene dos etiquetas: audio y source. Su implementación es la siguiente:

<audio controls>
  <source src="asset/audio.mp3" type="audio/mpeg" />
  <source src="asset/audio.ogg" type="audio/ogg" />
  El navegador no soporta HTML5.
</audio>

En el código anterior estamos utilizando la etiqueta audio para anidar las etiquetas source, las mismas que tienen el atributo src que apunta a la ruta del archivo de audio y el atributo type que indica el tipo de audio.

Las etiquetas source nos van a servir para insertar audios de respaldo. HTML va a intentar reproducir el primer archivo, si no puede, intentará reproducir el segundo. Si tampoco puede con el segundo, mostrará el mensaje El navegador no soporta HTML5.

Video​

Por otro lado, para insertar videos en HTML, tienes que utilizar el siguiente código:

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

Aquí el atributo controls también indica al navegador que deben mostarse los controles de manejo del audio, como play, pause y volume.

Video de respaldo​

Si necesitas insertar un video de respaldo, se puede hacer de la misma forma en que se inserta un audio de respaldo, es decir anidando la etiqueta source dentro de la etiqueta audio:

<audio controls>
  <source src="asset/recording.mp4" type="video/mp4" />
  <source src="asset/recording.wav" type="video/wav" />
  El navegador no soporta HTML5.
</audio>

Atributos opcionales para audio y video​

Tanto las etiquetas de audio como la de video tienen los siguientes atributos opcionales:

  • loop: reproducir el audio o video en bucle (se repide indefinidamente).
  • muted: el sonido por defecto del audio o video estará en silencio.

Explicación en video

En el siguiente video te explico todo lo anterior paso a paso.