¿Como funciona el comando en HTML5: 'Track'?

Instrucción <track> en HTML5

El elemento <track> en HTML5 se utiliza para especificar pistas de texto, como subtítulos, descripciones de audio, capítulos o metadatos , para elementos de medios (<video> y <audio>). Estas pistas mejoran la accesibilidad y la usabilidad de los medios incorporados mediante la inclusión de texto narrativo o descriptivo adicional.

Atributos principales de <track>

1. src: (Obligatorio) La URL que apunta al archivo de pista de texto.

2. kind: (Obligatorio) Define el tipo de pista de texto. Los valores comunes incluyen:

   • subtitles: Subtítulos para los espectadores que no entienden el idioma del audio o están en ambientes donde no pueden escuchar el audio.
   • captions: No solo incluyen el diálogo del medio, sino también otros sonidos importantes, como efectos de sonido. Su fin principal es la accesibilidad para personas sordas o con problemas auditivos.
   • descriptions: Descripciones de audio del contenido visual para usuarios con discapacidades visuales.
   • chapters: Define las divisiones del medio en capítulos, permitiendo una navegación más fácil.
   • metadata: Datos que pueden ser utilizados por scripts para complementar el archivo de medios. No están destinados a ser mostrados directamente al usuario.

3. srclang: Define el idioma de la pista de texto usando códigos de lenguaje BCP 47 (por ejemplo, "en" para inglés, "es" para español).

4. label: Proporciona una etiqueta legible por los humanos que describe la pista. Esto es útil cuando hay múltiples pistas disponibles y el usuario debe seleccionar una.

5. default: Un atributo booleano que indica qué pista de texto debe ser la predeterminada si el usuario no ha especificado otra preferencia.

Uso de <track> en HTML5: Ejemplos Sencillos

A continuación, se presentan algunos ejemplos de cómo el elemento <track> puede utilizarse dentro de los elementos <video> y <audio>.

Ejemplo 1: Subtítulos en un video

<video controls width="600">
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Español" default>
  Your browser does not support the video tag.
</video>

En este ejemplo:

• Se agregan subtítulos en inglés y español al video.
• La pista en español está marcada como default, por lo que se seleccionará automáticamente si el usuario no ha especificado una preferencia.

Ejemplo 2: Capítulos en un video

<video controls width="600">
  <source src="video.mp4" type="video/mp4">
  <track src="chapters.vtt" kind="chapters" srclang="en" label="Chapter markers">
  Your browser does not support the video tag.
</video>

En este ejemplo:

• La pista de texto define divisiones en capítulos dentro del video, lo que facilita la navegación al permitir que los usuarios salten a diferentes secciones del contenido.

Ejemplo 3: Descripciones en audio para personas con discapacidad visual

<video controls width="600">
  <source src="video.mp4" type="video/mp4">
  <track src="descriptions_en.vtt" kind="descriptions" srclang="en" label="Audio descriptions">
  Your browser does not support the video tag.
</video>

En este ejemplo:

• Se proporciona una pista de texto con descripciones de audio en inglés, lo que ayuda a los usuarios con discapacidad visual a comprender mejor el contenido visual del video.

Estos ejemplos demuestran cómo el elemento <track> ayuda a enriquecer la experiencia del usuario proporcionando capas adicionales de información que aumentan la accesibilidad y la utilidad del contenido multimedia.