En los primeros tiempos de Internet los navegadores web solo podían mostrar texto. Afortunadamente, el aumento progresivo de la velocidad de las líneas de comunicación, la capacidad de procesamiento de los ordenadores y la creación de estándares, han hecho posible, la incorporación de todo tipo de contenido audiovisual. Tanto así, que muchos sitios web no tendrían sentido si los navegadores no fueran capaces de reproducir audio y video (Youtube es un ejemplo significativo).
Las etiquetas que permiten incorporar audio y video a una página web son:
- <audio>
- <video>
Ambas etiquetas disponen de una serie de atributos que ofrecen cierto control sobre la reproducción del audio y del video.
La etiqueta <audio> dispone los siguientes atributos:
- src: Es el único obligatorio, ya que contiene la ruta de acceso o el URL donde se encuentra el archivo de audio. HTML admite formatos MP3, WAV y OGG.
- controls: Muestra los controles mediante los que se puede manejar la reproducción de audio
- loop: El archivo de audio se reproduce indefinidamente
Aquí encontraras todos los atributos de la etiqueta <audio>, pulsa aquí
Aunque esta etiqueta se puede usar sin el correspondiente cierre, se recomienda añadirla, ya que de los contrario no se mostrará el resto del contenido del documento HTML. Habitualmente no se incluye nada entre ambas, pero cuando se utilizan formatos que no son compatibles con todos los navegadores, se aconseja añadir un conjunto de etiquetas <source> que especifiquen distintas fuentes de audio alternativas. De esta manera, se reproduciría el primero que tuviera soportado.
Cuando se emplean etiquetas <source>, la ruta URL de acceso a los archivos de audio deberá estar en su atributo src ( no en el de la etiqueta <audio>. Aunque no es imprescindible, conviene añadir también el atributo type con el tipo MIME del archivo ("audio/mp3", "audio/wav", o "audio/ogg", según el formato). De esta manera, el navegador dispondrá de más información a la hora de decidir cuál es el archivo que puede reproducir.
En conclusión, el código HTML de la etiqueta <audio> en el que las fuentes de sonido se establecen mediante etiquetas <source>, quedaría así:
<audio>
<source src = ruta de acceso o URL type = tipo MIME>
<source src = ruta de acceso o URL type = tipo MIME>
...
</audio>
Si lo que pretende es incorporar video a una página, deberá utilizar la etiqueta <video>, que también dispone de una serie de atributos muy útiles.
Los primeros tienen las misma función que los de audio: src, controls y loop. El resto de atributos son específcos de la etiqueta <video>
- width y height: Determinan el ancho y el alto de la imagen de video
- poster: Contiene la ruta o URL de la imagen que se mostraría mientras se descarga el video o antes de pulsar el botón de reproducción
- muted: Hace que el video se ejecute en silencio. En cualquier momento podrá subirle el volumen con el control correspondiente