Audio y Video

Para agregar contenido de audio y video a una página web, HTML proporciona los elementos <audio> y <video>. Estos elementos permiten incrustar archivos multimedia directamente en una página web sin necesidad de utilizar complementos externos como Flash. Aquí te muestro cómo utilizar estos elementos junto con algunos de sus atributos comunes:

Elemento <audio>:

El elemento <audio> se utiliza para incrustar archivos de audio en una página web. Aquí tienes un ejemplo básico de cómo usarlo:

<audio controls>
    <source src="audio.mp3" type="audio/mp3">
    Tu navegador no soporta el elemento de audio.
</audio>

• controls: Este atributo agrega controles de reproducción al reproductor de audio, como botones de reproducción/pausa, control de volumen, etc.
• src: Especifica la URL del archivo de audio que se va a reproducir.
• type: Indica el tipo MIME del archivo de audio. Esto es importante para que el navegador pueda determinar cómo reproducir el archivo.

Elemento <video>:

El elemento <video> se utiliza para incrustar archivos de video en una página web. Aquí tienes un ejemplo básico de cómo usarlo:

<video controls poster="images/banner.webp" width="480" height="270">
    <source src="video.mp4" type="video/mp4">
    Tu navegador no soporta el elemento de video.
</video>

• controls: Agrega controles de reproducción al reproductor de video.
• src: Especifica la URL del archivo de video que se va a reproducir.
• type: Indica el tipo MIME del archivo de video.

Atributos comunes:

Además de los atributos específicos mencionados anteriormente, tanto el elemento <audio> como el elemento <video> comparten varios atributos comunes, como autoplay, loop, muted, entre otros. Aquí tienes una lista de algunos de los atributos comunes:

• autoplay: Hace que el audio o video comience a reproducirse automáticamente cuando la página se carga.
• loop: Indica si el audio o video debe reproducirse en bucle una vez que alcanza el final.
• muted: Silencia el audio del elemento.
• preload: Especifica cómo y cuándo se debe cargar el audio o video. Los valores posibles son auto, metadata y none.
• poster: Especifica una imagen de vista previa para el video antes de que se reproduzca.

Pistas:

Entre las etiquetas de apertura y cierre obligatorias de audio y video, incluye uno o más elementos para especificar pistas de texto temporizadas. En el siguiente ejemplo, se incluyen dos archivos <track> que proporcionan subtítulos de texto temporizados en inglés y francés.

<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Français" kind="subtitles" srclang="fr" lang="fr-fr" src="vtt/subtitles-fr.vtt" />

Los archivos de pistas, especificados en el atributo src, deben estar en formato WebVTT (.vtt). Los archivos deben estar en el mismo dominio que el documento HTML, a menos que se incluya el atributo crossorigin.

Hay cinco valores enumerados para el atributo kind de la pista: subtitles, captions, descriptions, chapters y otros metadata.

Incluye subtitles junto con el atributo srclang para la transcripción de diálogos y las traducciones. El valor de cada atributo label se muestra al usuario como una opción. El contenido de la opción VTT seleccionada se muestra sobre el video. La apariencia de los subtítulos se puede personalizar si se orienta a ::cue/ ::cue().

El valor kind="caption" debe reservarse para la transcripción y las traducciones que incluyan efectos de sonido y otra información de audio relevante. Este contenido no es solo para usuarios sordos. Tal vez un usuario no puede encontrar sus auriculares, por lo que activó los subtítulos. O tal vez no pudieron escuchar los últimos temas de conversación de un podcast favorito, por lo que quieren leer la transcripción para confirmar su comprensión. Tener formas alternativas de acceder a contenido de audio y video es importante y conveniente.

kind="description" es para descripciones de texto del contenido visual del video para usuarios que no pueden verlo, ya sea que usen un sistema sin pantalla, como Google Home o Alexa, o que sean ciegos.

Ejemplo completo:

Aquí tienes un ejemplo completo que muestra cómo incrustar un archivo de audio y un archivo de video en una página web:

<audio controls>
    <source src="audio.mp3" type="audio/mp3">
    Tu navegador no soporta el elemento de audio.
</audio>

<video controls poster="images/banner.webp" width="480" height="270">
    <source src="video.mp4" type="video/mp4">
    Tu navegador no soporta el elemento de video.
</video>

Estos son los elementos básicos y algunos de los atributos comunes que se utilizan para incrustar contenido de audio y video en una página web utilizando HTML.