HTML: Pista de texto

El elemento <track> es un recurso que aportó HTML5 para proveer pistas de texto para los recursos multimedia. Con este elemento es posible introducir títulos, subtítulos, descripciones y metadatos a los elementos <video> y <audio>. El formato de las pistas de texto es WebVTT (archivos VTT).

La forma de uso de este elemento es muy simple. Debe usarse como elemento hijo de los elementos <video> y <audio>. Además, el elemento <track> es un elemento vacío, por lo que no tiene etiqueta de cierre y tampoco tiene contenido propio. Las pistas de texto se especifican mediante atributos.

Ejemplo de código HTML con una pista de texto:

<video controls src="/multimedia/video.mp4">
  <track default
    kind="captions"
    srclang="es"
    src="/multimedia/video.vtt" />
</video>

En el ejemplo anterior se han alineado los atributos para que se pueda leer el código con mayor facilidad. A continuación se explica el uso de los atributos.

Atributos de pista de texto

Las pistas de texto tienen los atributos globales, entre los que se encuentran los más relevantes: class, id, xml:lang, lang, style, dir, hidden, etc. Además, el elemento <track> tiene atributos que le son específicos.

El atributo ‘kind’

El atributo kind es el más importante del elemento <track>. Con este atributo es posible definir cinco tipos diferentes de información, por lo que los navegadores web mostrarán las pistas de texto según el tipo de información que representan. Estos son los cinco valores del atributo kind:

  • subtitles
  • captions
  • descriptions
  • chapters
  • metadata

El valor subtitles se utiliza para proporcionar la transcripción o la traducción de contenido. Por ejemplo, puede ser usado en la transcripción de vídeos educativos o en los diálogos de una película. A veces también se usan para añadir información adicional sobre una escena concreta.

El valor captions es adecuado para usuarios sordos o cuando el sonido está desactivado. Este valor permite proveer transcripciones y traducciones, además de información no verbal sobre la música o la fuente de la anotación.

El valor descriptions es adecuado para usuarios ciegos. Este valor está pensado para aportar información textual del contenido del vídeo. Los navegadores web usan sintetizadores de voz para reproducir el contenido textual.

El valor chapters está pensado para proveer los títulos de los capítulos, y permitir a los usuarios navegar el recurso de medios. En este caso, los navegadores web pueden proveer los títulos como una lista interactiva.

El valor metadata está pensando para ser usado únicamente con programas informáticos. Esta información no será mostrada por el navegador web, por lo que no será visible para el usuario.

El atributo ‘src’

Mediante el atributo src indicamos la ruta de la pista de texto (archivo VTT). La ruta debe ser una URL válida y debe tener el mismo origen que el documento HTML, excepto si el elemento <video> o <audio> tiene un atributo crossorigin. El atributo src es uso obligatorio.

El atributo ‘srclang’

Con el atributo srclang se indica el idioma de los datos de la pista de texto. Su valor debe ser una etiqueta válida de idioma (BCP 47) Este atributo es obligatorio en el caso de que el atributo kind tenga el valor subtitles.

El atributo ‘label’

El atributo label otorga un título a la pista de texto. Este título es el que indicará el navegador web cuando muestre la lista de pistas de texto disponibles.

El atributo ‘defaut’

El atributo default sirve para indicar que la pista de texto debe estar activada por defecto de acuerdo a las preferencias del usuario. Se trata de un atributo binario, por lo que no requiere valor y su simple presencia ya convierte la pista de texto en predeterminada. Como es lógico, este atributo sólo puede ser usado en un elemento <track> de cada elemento multimedia.

← Artículo anterior
HTML: Recursos
Artículo siguiente →
HTML: Plugins