Audio y video

Como aprendiste en el módulo imágenes, HTML permite incorporar contenido multimedia en una página web. En esta sección, analizaremos los archivos de audio y video, incluido cómo incorporarlos, los controles del usuario, cómo proporcionar una imagen estática de marcador de posición 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 como elemento contenedor para una serie de elementos <source>, en los que cada uno proporciona una sugerencia de archivo src. Si bien <video> se puede usar para incorporar un archivo de audio, el elemento <audio> es preferible para incorporar archivos de sonido.

Las etiquetas de apertura <video> y <audio> pueden contener varios otros atributos, incluidos 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 que vincula 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 para el usuario.

El contenido alternativo se incluye entre las etiquetas de apertura y cierre. Si el usuario-agente no admite <video> (o <audio>, se muestra 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, ¿verdad?).

Si no se incluye ningún atributo src en las etiquetas de apertura <video> o <audio>, incluye uno o más elementos <source>, cada uno con un atributo src para 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 medio del archivo vinculado. Esto evita que el navegador recupere archivos multimedia que no podría decodificar.

Dentro del atributo type, puedes incluir un parámetro codecs, que especifica exactamente cómo se codifica el recurso. Los códecs te permiten incluir optimizaciones de medios como mejoras progresivas (elementos no 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.

Los códecs también pueden ser más difíciles de descifrar, como <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a">, que indica que la codificación MP4 es Advanced Video Coding Main Profile Level 4.2. Explicar esta sintaxis está fuera del alcance de esta lección. Para obtener más detalles, lee la publicación de Jake Archibald sobre cómo determinar el parámetro del códec para un video AV1.

Cuando se muestra un video, de forma predeterminada, el primer fotograma del video se muestra como una toma estática 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 se reproduce el video y, luego, se pausa, no se vuelve a mostrar el póster.

Asegúrate de definir la relación de aspecto de tu video, ya que, cuando se cargue, una diferencia de tamaño entre el póster y el video provocará un nuevo diseño y un nuevo pintado.

Siempre incluye el atributo controls booleano. Esto hace que los controles del usuario sean visibles, lo que les permite controlar los niveles de audio, silenciarlo 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 tendrán en cuenta 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 cronometrado. En el siguiente ejemplo, se incluyen dos archivos <track> que proporcionan subtítulos de texto cronometrado 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 de seguimiento kind: subtitles, captions, descriptions, chapters y otro metadata.

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

El valor kind="caption" debe reservarse para las transcripciones y traducciones que incluyen efectos de sonido y otra información de audio pertinente. Esto no es solo para los usuarios sordos. Quizás un usuario no encuentra sus auriculares, por lo que activó los subtítulos. O tal vez no entendieron bien los últimos puntos de conversación de un podcast favorito, por lo que quieren leer la transcripción para confirmar que comprendieron bien. Tener formas alternativas de acceder al contenido de audio y video es importante y conveniente.

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

Proporcionar subtítulos con el formato WebVTT hace que el video sea accesible para las personas con problemas auditivos. La discapacidad auditiva puede deberse a que el usuario se encuentra en un entorno ruidoso, tiene bocinas defectuosas o auriculares rotos, o bien porque la persona tiene pérdida auditiva o se identifica como sorda. Asegurarte de que tu contenido sea accesible ayuda a muchas más personas de lo que crees, a todos.

Consideraciones sobre el video de fondo

Es posible que tu equipo de diseño o marketing quiera que tu sitio incluya un video de fondo. Por lo general, esto significa que quieren un video en bucle, silenciado y de reproducción automática sin controles. El código HTML podría verse así:

<video playsinline 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 a través de videos de fondo sin brindar 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 que siempre están silenciados, quita la pista de audio de tus fuentes de medios.

Si tu video se reproduce durante cinco segundos o menos, los lineamientos de accesibilidad no requieren un mecanismo de pausa, pero cualquier elemento con el atributo booleano loop se repetirá de forma indefinida de forma predeterminada, lo que excederá este límite de cinco segundos o cualquier otro límite de tiempo. Para brindar una buena experiencia del usuario, siempre incluye un método para pausar el video. La forma más sencilla de hacerlo es incluir controls.

Controles multimedia personalizados

Para mostrar controles de audio o video personalizados, en lugar de los controles integrados del 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 contienen el texto que se actualiza 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 controlado por 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 cambies el estado de reproducción, también cambia 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;
  }
}

Si se incluye el atributo controls, el usuario tiene una forma de controlar el audio (o el video) incluso si falla JavaScript. Solo quita el atributo de controles una vez que se haya creado una instancia del botón de reemplazo.

document.querySelector('[aria-controls]').removeAttribute('controls');

Siempre incluye controles externos cuando los usuarios no puedan acceder a los controles, 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 de los medios para satisfacer las necesidades ambientales y sensoriales de los usuarios, incluidas las de los millones de personas con pérdida auditiva y discapacidad visual. Acabamos de mencionar HTMLMediaElement, que proporciona varias propiedades, métodos y eventos que heredan tanto HTMLVideoElement como HTMLAudioElement, y HTMLMediaElement agrega algunas propiedades, métodos y eventos propios. Existen varias 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 audio en vivo y grabado previamente, y transmitir, guardar o enviar el audio al elemento <audio>.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre audio y video.