Audio y video

Como aprendiste en el módulo de imágenes, HTML permite incorporar contenido multimedia en una página web. En esta sección analizamos los archivos de audio y video, incluido cómo incorporarlos, los controles del usuario, el suministro de marcadores de posición de imagen estática para tus videos, y prácticas recomendadas, como hacer que los archivos de audio y video sean accesibles.

<audio> y <video>

<video> y <audio> se pueden usar para incorporar reproductores multimedia directamente con el atributo src o como elementos contenedor para una serie de elementos <source>. cada uno proporciona una sugerencia de archivo src. Si bien se puede usar <video> para incorporar un archivo de audio, es preferible usar el elemento <audio> para la incorporación. archivos de sonido.

Las etiquetas de apertura <video> y <audio> pueden contener otros atributos, como los siguientes: controls, autoplay, loop, mute, preload y los atributos globales. El elemento <video> también admite 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 al usuario.

Se incluye contenido de resguardo entre las etiquetas de apertura y cierre. Si el usuario-agente no admite <video> (ni <audio>, se mostrará este contenido. La etiqueta de cierre </video> es obligatoria, incluso si no hay contenido entre ambas. (pero siempre debería haber contenido alternativo).

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 a 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. del tipo de medio del archivo vinculado. Esto evita que el navegador de la recuperación de archivos multimedia que no podría decodificar.

En el 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 contenido multimedia que aún no son compatibles en 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 usando la sintaxis intuitiva, como <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis">, que indica que el elemento 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">. lo que indica que la codificación MP4 es Advanced Video Coding Main Profile de nivel 4.2. Explicar esta sintaxis va mucho más allá en el alcance de esta lección. Jake Archibald tiene una publicación que explica cómo determinar el parámetro de códec para un video de AV1. si quieres obtener más información.

Cuando se muestra un video, de manera predeterminada, el primer cuadro del video aparece 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 luego se pausa, no se vuelve a mostrar el póster.

Asegúrate de definir la relación de aspecto del video, ya que, cuando se carga, aparece una diferencia de tamaño entre el póster y el video producirá un ajuste automático y un nuevo trazo.

Incluye siempre el atributo booleano controls. Esto hace que los controles de usuario visible, lo que les permite a los usuarios 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 los navegadores no tomarán en cuenta la directiva del atributo autoplay si el atributo booleano muted se omite porque la reproducción automática de un Por lo general, la experiencia del usuario no es buena para el archivo multimedia, incluso cuando está silenciado y tiene controles visibles.

Pistas

Entre las etiquetas de inicio y de cierre obligatorias del audio y el video, incluye una o más <track>. para especificar pistas de texto temporizadas. El siguiente ejemplo incluye dos archivos <track>, que proporcionan subtítulos de texto con marcas de tiempo 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 seguimiento, 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 crossorigin si incluyes este atributo.

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 y las traducciones de diálogos. El valor de cada atributo label se muestra como una opción al usuario. El contenido de la opción de VTT seleccionada se muestra sobre el video. El aspecto de la Puedes adaptar el estilo de los subtítulos segmentándolos en ::cue/ ::cue().

El valor kind="caption" se debe reservar para transcripciones y traducciones que incluyan efectos de sonido y otra información de audio relevante. Esto no es solo para usuarios sordos. Tal vez un usuario no pudo encontrar sus auriculares, por lo que activó los subtítulos. O tal vez no captar los últimos temas de conversación de un podcast favorito, así que quieren leer la transcripción para confirmar lo que comprendieron. Tener otras maneras de acceder al contenido de audio y video es importante y conveniente.

El elemento kind="description" es para descripciones de texto del contenido visual del video, destinado a los usuarios que no pueden verlo, ya sea usa un sistema sin pantalla, como Google Home o Alexa, o es una persona ciega.

Proporcionar subtítulos con el formato WebVTT para que las personas con discapacidad auditiva. Recuerda, la discapacidad es un desajuste entre una persona y su entorno actual. La discapacidad auditiva puede deberse a al usuario en un entorno ruidoso, si sus bocinas no funcionan o sus auriculares están rotos, o porque tiene alguna pérdida auditiva o es una persona con discapacidad auditiva. Asegurarte de que tu contenido sea accesible ayuda a muchas más personas de las que crees. ayuda a todos.

Consideraciones sobre los videos en segundo plano

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 desean silenciar, video en bucle y reproducción automática sin controles. El HTML podría verse así:

<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 a través de videos de fondo sin brindar a los usuarios control sobre la reproducción y el acceso a todos los subtítulos. Como este video es meramente decorativo, incluye el rol de ARIA. de none y omite cualquier contenido alternativo. Para mejorar el rendimiento de los videos siempre silenciados, quita la pista de audio de tus fuentes multimedia.

Si el video se reproduce por cinco segundos o menos, las pautas de accesibilidad no requieren un mecanismo de pausa, sino con el atributo booleano loop se repetirá indefinidamente de manera predeterminada, lo que excederá este límite de tiempo de cinco segundos o cualquier otro. Para siempre experiencia del usuario, incluye siempre un método para pausar el video. Esto se hace más fácil 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, utiliza JavaScript para agregar controles multimedia personalizados y quitar el atributo de controles. Por ejemplo, puedes agregar un <button> que active o desactive la opción 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á cuando el visitante active o desactive la opción 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 se activa o desactiva el estado de reproducción, también activar o desactivar 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 incluyes el atributo controls, el usuario podrá controlar el audio (o video) incluso si falla JavaScript. Solo quita el atributo de controles una vez que se haya creado una instancia de un botón de reemplazo.

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

Siempre incluye 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 al contenido multimedia para adaptar el contenido a los usuarios diferentes necesidades ambientales y sensoriales, incluidos los millones de personas con pérdida de audición y discapacidad visual. Ya hablamos de la HTMLMediaElement, que proporciona varias propiedades, métodos y eventos que heredan HTMLVideoElement y HTMLAudioElement, y HTMLMediaElement agregando algunas propiedades. métodos y eventos propios. Existen muchas otras APIs de contenido multimedia, incluida una API de TextTrack. Puedes usar la captura y transmisiones de contenido multimedia. y las APIs de 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 transmitirlo, guardarlo o enviarlo al elemento <audio>.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre audio y video.