Como aprendiste en el módulo images, HTML permite incorporar contenido multimedia en una página web. En esta sección, analizaremos los archivos de audio y video, lo que incluye cómo incorporarlos, los controles del usuario, cómo proporcionar un marcador de posición de imagen estática para tus videos y las prácticas recomendadas, como hacer que los archivos de audio y video sean accesibles.
<audio> y <video>
Los elementos <video> y <audio> se pueden usar para incorporar reproductores multimedia directamente con el atributo src, o se pueden usar como elemento contenedor para una serie de elementos <source>, cada uno de los cuales proporciona una sugerencia de archivo src. Si bien <video> se puede usar para incorporar un archivo de audio, se prefiere el elemento <audio> para incorporar archivos de sonido.
Las etiquetas <video> y <audio> de apertura pueden contener muchos otros atributos, como controls, autoplay, loop, mute, preload y los atributos globales. El elemento <video> también admite los atributos height, width y poster.
<video src="videos/machines.webm" poster="images/machine.jpg" controls>
<p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>
Este ejemplo de <video> tiene una sola fuente con el atributo src vinculado a la fuente de video. El atributo poster proporciona una imagen para mostrar mientras se carga el video. Por último, el atributo controls proporciona controles de video del usuario.
El contenido de resguardo se incluye entre las etiquetas de apertura y cierre. Si el usuario-agente no admite <video> (o <audio>, se mostrará este contenido. La etiqueta de cierre </video> es obligatoria, incluso si no hay contenido entre las dos (pero siempre debería haber contenido de resguardo, ¿no?).
Si no se incluye ningún atributo src en las etiquetas <video> o <audio> de apertura, incluye uno o más elementos <source>, cada uno con un atributo src en un archivo multimedia. En el siguiente ejemplo, se incluyen tres opciones de archivos multimedia, contenido de resguardo y subtítulos en inglés y francés entre las etiquetas de apertura y cierre.
<video controls poster="images/machine.jpg">
<source src="videos/machines.webm" type="video/webm">
<source src="videos/machines.mp4" type="video/mp4">
<source src="videos/machines.ogv" type="video/ogg">
<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Francais" kind="subtitles" srclang="fr" src="vtt/subtitles-fr.vtt" />
<p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>
Cada elemento secundario <source> incluye un atributo src que apunta al recurso, y el atributo type informa al navegador sobre el tipo de contenido multimedia del archivo vinculado. De esta manera, se evita que el navegador recupere archivos multimedia que no podría decodificar.
Dentro del atributo type, puedes incluir un parámetro codecs que especifique con exactitud cómo se codifica el recurso. Los códecs te permiten incluir optimizaciones de contenido multimedia que aún no son compatibles con todos los navegadores. El códec se separa del tipo de medio con un punto y coma. Por ejemplo, el códec se puede escribir con una sintaxis intuitiva, como <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis">, que indica que los archivos WebM contienen video VP8 y audio vorbis. También pueden ser más difíciles de descifrar los códecs, como <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a">, que indica que la codificación MP4 es el nivel 4.2 del perfil principal de codificación de video avanzada. Explicar esta sintaxis está fuera del alcance de esta lección. Jake Archibald tiene una publicación que explica cómo determinar el parámetro del códec para un video de AV1 si quieres obtener más información.
Cuando se muestra un video, de forma predeterminada, el primer fotograma del video se muestra como toma fija cuando está disponible.
Esto es algo que se puede controlar. El atributo poster permite que se muestre la fuente de una imagen mientras se descarga el video y hasta que se reproduce. Si el video se reproduce y, posteriormente, se pausa, el póster no se vuelve a mostrar.
Asegúrate de definir la relación de aspecto del video, ya que, cuando se cargue, una diferencia de tamaño entre el póster y el video provocará un ajuste automático y la repetición de pintura.
Incluye siempre el atributo boolean controls. De esta manera, los controles del usuario estarán visibles, y podrán controlar los niveles, silenciar el audio por completo y expandir el video a pantalla completa.
Omitir controls crea una mala experiencia del usuario, especialmente si se incluye el atributo booleano autoplay. Ten en cuenta que algunos navegadores no seguirán la directiva del atributo autoplay si se omite el atributo booleano muted, ya que la reproducción automática de un archivo multimedia suele ser una mala experiencia del usuario, incluso cuando está silenciado y con controles visibles.
Pistas
Entre las etiquetas de apertura y cierre obligatorias de audio y video, incluye uno o más elementos <track> 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.
Si proporcionas subtítulos con el formato WebVTT, las personas con hipoacusia podrán acceder al video. Recuerda, la discapacidad es una discrepancia entre una persona y su entorno actual. Las discapacidades auditivas pueden deberse a que el usuario está en un entorno ruidoso, tiene bocinas dañadas o auriculares rotos, o a que el usuario tiene alguna pérdida auditiva o es sordo. Asegurarte de que tu contenido sea accesible ayuda a muchas más personas de las que crees, ya que ayuda a todos.
Consideraciones sobre el video en segundo plano
Es posible que tu equipo de marketing o de diseño desee que tu sitio incluya un video de fondo. Es decir, quieren un video silenciado, que se reproduce automáticamente y se repite indefinidamente, sin controles. El código HTML puede tener un aspecto similar al siguiente:
<video autoplay loop muted poster="images/machine.jpg" role="none">
<source src="videos/machines.webm" type="video/webm">
<source src="videos/machines.mp4" type="video/mp4">
<source src="videos/machines.ogv" type="video/ogg">
</video>
No se puede acceder a los videos de fondo. El contenido no debe transmitirse mediante videos en segundo plano sin ofrecer a los usuarios control total sobre la reproducción y acceso a todos los subtítulos. Como este video es meramente decorativo, incluye el rol de ARIA de none y omite cualquier contenido de resguardo.
Para mejorar el rendimiento de los videos siempre silenciados, quita la pista de audio de tus fuentes de contenido multimedia.
Si el video se reproduce durante cinco segundos o menos, los lineamientos de accesibilidad no requieren un mecanismo de pausa, pero todo lo que incluya el atributo booleano loop se repetirá indefinidamente de forma predeterminada y superará este límite de tiempo de cinco segundos o cualquier otro. Para brindar una buena experiencia del usuario, incluye siempre un método para pausar el video. Es más fácil hacerlo si incluyes controls.
Controles multimedia personalizados
Para mostrar controles de audio o video personalizados, en lugar de los controles integrados en el navegador, incluye el atributo controls. Luego, usa JavaScript para agregar controles multimedia personalizados y quitar el atributo de controles. Por ejemplo, puedes agregar un <button> que active o desactive el estado de reproducción de un archivo de audio.
<button id="playPause" aria-controls="idOfAudio"
data-pause-text="Pause audio"
data-play-text="Play audio">Pause audio</button>
En este ejemplo, se incluye un botón con atributos dataset que contiene el texto que se actualizará a medida que el visitante alterna entre los estados de reproducción y pausa. El atributo aria-controls se incluye con el id del elemento que controla el botón; en este caso, el audio. Cada botón que controla el audio tiene un controlador de eventos.
Para crear controles personalizados, usa HTMLMediaElement.play() y HTMLMediaElement.pause(). Cuando actives el estado de reproducción, también activa o desactiva el texto del botón:
const pauseButton = document.getElementById('playPause');
pauseButton.addEventListener("click", pauseAndPlay, false);
function pauseAndPlay() {
console.log(this);
const media = document.getElementById(this.getAttribute('aria-controls'));
if (media.paused) {
media.play();
this.innerText = this.dataset.pauseText;
} else {
media.pause();
this.innerText = this.dataset.playText;
}
}
Cuando incluyes el atributo controls, el usuario puede controlar el audio (o video) incluso si falla JavaScript.
Solo quita el atributo de controles una vez que se haya creado una instancia de botón de reemplazo.
document.querySelector('[aria-controls]').removeAttribute('controls');
Incluye siempre controles externos cuando los usuarios no puedan acceder a ellos, como en el caso de los videos en segundo plano que tienen los controles ocultos detrás del contenido del sitio. Es importante comprender los conceptos básicos de los requisitos de accesibilidad del contenido multimedia para adaptarte a los usuarios con diferentes necesidades ambientales y sensoriales, incluidos los millones de personas con pérdida auditiva y deficiencia visual.
Acabamos de ver el elemento HTMLMediaElement, que proporciona varias propiedades, métodos y eventos que heredan HTMLVideoElement y HTMLAudioElement. Además, HTMLMediaElement agregó algunas propiedades, métodos y eventos propios. Hay muchas otras APIs de Media, incluida una API de TextTrack. Puedes usar las APIs de Media Capture and Streams y MediaDevices para grabar audio desde el micrófono de un usuario o grabar la pantalla de un usuario. La API de Web Audio permite manipular la transmisión y el audio en vivo y grabado previamente, así como guardar o enviar el audio al elemento <audio>.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre audio y video.
¿Para qué se usa el elemento <track>?
¿Qué controla el atributo poster?