Incrustación de Audio y Vídeo

Incrustración de Audio

Para incluir archivos de audio en una página web, podemos utilizar el elemento <audio>. Veamos un ejemplo:

En este ejemplo tenemos.

• El elemento <audio> contiene un elemento <source>, que especifica la URL y el tipo de archivo del fichero de audio. Los formatos más comunes son MP3 y OGG;
• El atributo controls muestra los controles de reproducción estándar, como reproducción, pausa y volumen;
• Si el navegador del usuario no admite el elemento de audio, se mostrará un mensaje de error.

Otros atributos utilizados habitualmente con el elemento de audio HTML son:

• autoplay - inicia la reproducción del archivo de audio en cuanto se carga la página;
• loop - hace que el archivo de audio se reproduzca en bucle continuo;
• muted - silencia el audio por defecto;
• volume - especifica el nivel de volumen predeterminado para el archivo de audio, que va de 0.0 (silencio) a 1.0 (volumen máximo).

He aquí un ejemplo que demuestra el uso de todos estos atributos:

Incrustación de Video

Podemos utilizar el elemento <video> para incrustar archivos de video en una página web. Considere el siguiente ejemplo:

En este ejemplo:

• El elemento <video> contiene un elemento <source>, que especifica la URL y el tipo de archivo del fichero de vídeo. Los formatos más comunes son WebM, MP4 y OGG;
• El atributo controls muestra los controles de reproducción estándar;
• Si el navegador del usuario no es compatible con el elemento de vídeo, se mostrará un mensaje de error.

Los atributos más utilizados para el elemento de vídeo HTML incluyen:

• autoplay - inicia la reproducción del archivo de vídeo en cuanto se carga la página;
• loop - hace que el archivo de vídeo se reproduzca en bucle continuo;
• muted - silencia el audio por defecto;
• volume - especifica el nivel de volumen predeterminado para el archivo de audio, que va de 0.0 (silencio) a 1.0 (volumen máximo);
• poster - especifica la URL de una imagen que se mostrará como miniatura del vídeo antes de reproducirlo;
• width y height - especifica la anchura y la altura del reproductor de vídeo en píxeles.

He aquí un ejemplo que demuestra el uso de todos estos atributos:

Nota

Además, existen muchas bibliotecas y API de JavaScript que proporcionan funciones adicionales para reproducir y manipular contenidos de vídeo en la web.