HTML5 nos permite realizar la inserción de audio y video de una forma muy sencilla, lo cual no era posible en versiones anteriores de HTML.

Inserción de Audio

La inserción de audio, se realiza con las etiquetas <audio> y </audio>. Anteriormente para insertar audio en una página se utilizaba normalmente una tecnología llamada Flash y adicionalmente se tenía que instalar un componente llamado plugin en cada navegador, lo cual era una labor en ocasiones tediosas.

Los formatos de audio soportados son: MP3, WAV y Ogg.

Atributos principales de la etiqueta <audio>

• autoplay: Indica que el audio se reproduce automáticamente cuando está listo.
• controls: Indica que se muestra controles, como los botones play, pause, etc.
• loop: Indica que el audio se reproduce de nuevo cada vez que termina.
• muted: Indica que el audio estará silenciado.
• preload: Indica si el audio carga previamente al tiempo que la página ha cargado. Los posibles valores de este atributo son “auto” o “none”.
• src: Indica la ubicación del archivo de audio a reproducir.

Ejemplo:

<audio src="miaudio.mp3" autoplay controls loop > Audio no soportado </audio>

En el caso que el navegador no soporte el componente de audio, en vez de este, se le mostrará en pantalla el texto “Audio no soportado” que hemos puesto adentro.

Adicionalmente si se quiere agregar más de una fuente de audio se utiliza la etiqueta <source>

Ejemplo: Audio HTML5

Agregar múltiples fuentes es útil en el caso que la primer fuente no se encuentre por algún motivo, entonces tratará de buscar la siguiente fuente hasta encontrar alguna.

Inserción de Video

La inserción de video, se realiza con las etiquetas <video> y </video>. Al igual que el audio, esta funcionalidad no requiere de la instalación de plugins en el navegador para su funcionamiento.

Los formatos de video soportados son: MP4, WebM y Ogg.

Atributos principales de la etiqueta <video>

Ejemplo: Video HTML5

• autoplay: Indica que el video se reproduce automáticamente cuando está listo.
• controls: Indica que se muestra controles, como los botones play, pause, etc.
• loop: Indica que el video se reproduce de nuevo cada vez que termina.
• muted: Indica que el video estará silenciado.
• preload: Indica si el video carga previamente al tiempo que la página ha cargado. Los posibles valores de este atributo son “auto” o “none”.
• src: Indica la ubicación del archivo de video a reproducir.
• width: Indica el ancho del video en pixeles.
• height: Indica la altura del video en pixeles.
• poster: indica la ubicación de una imagen que se mostrará mientras el video está cargando.

Ejemplo:

<video src="movie.mp4" width="320" height="240" controls> Video no soportado </video>

Si se quiere agregar más de una fuente se utiliza la etiqueta <source>