HTML track

La etiqueta <track> en HTML es utilizada para agregar subtítulos, descripciones de audio o metadatos a elementos multimedia como <audio> o <video>. Es un elemento de bloque que permite especificar un archivo de texto para ser utilizado como subtítulos o metadatos.

La etiqueta <track> debe ser un hijo de un elemento multimedia como <audio> o <video>.

Ejemplo de uso

Aquí tienes un ejemplo de cómo se utiliza:

<video src="video.mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" default>
</video>
Lenguaje del código: HTML, XML (xml)

En este ejemplo se está utilizando un video llamado “video.mp4” y se está añadiendo un archivo de subtítulos llamado “subtitles.vtt” con idioma “en” y serán mostrados por defecto.

Es importante mencionar que esta etiqueta es compatible con la mayoría de los navegadores modernos, pero puede no ser soportada en algunos navegadores antiguos.

Atributos

Los atributos más importantes de la etiqueta <track> en HTML son:

  • src: especifica la ruta del archivo de texto con los subtítulos o metadatos
  • kind: especifica el tipo de contenido del archivo de texto, puede ser “subtitles” para subtítulos, “captions” para descripciones de audio, “descriptions” para descripciones de audio, “chapters” para capítulos y “metadata” para metadatos.

Los atributos srclang y default son opcionales, pero pueden ser útiles para especificar el idioma y si deben ser mostrados por defecto.

Más ejemplos

Aquí tienes algunos ejemplos de cómo utilizar los atributos de la etiqueta <track> en HTML:

  1. Añadir subtítulos a un video:
<video src="video.mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" default>
</video>
Lenguaje del código: HTML, XML (xml)

En este ejemplo se está usando un video llamado “video.mp4” y se está añadiendo un archivo de subtítulos llamado “subtitles.vtt” con idioma “en” y serán mostrados por defecto.

  1. Añadir descripciones de audio a un video:
<video src="video.mp4">
  <track src="descriptions.vtt" kind="descriptions" srclang="es">
</video>
Lenguaje del código: HTML, XML (xml)

En este ejemplo se está utilizando un video llamado “video.mp4” y se está añadiendo un archivo de descripciones de audio llamado “descriptions.vtt” con idioma “es”, no serán mostrados por defecto.

  1. Añadir metadatos a un video:
<video src="video.mp4">
  <track src="metadata.vtt" kind="metadata">
</video>
Lenguaje del código: HTML, XML (xml)

En este ejemplo se está usando un video llamado “video.mp4” y se está añadiendo un archivo de metadatos llamado “metadata.vtt” no se especifica idioma y no serán mostrados por defecto.

Al utilizar la etiqueta <track> es importante especificar la ruta del archivo de texto con los subtítulos o metadatos y el tipo de contenido del archivo para poder mostrarlo correctamente.