Elemento track

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento track permite a los autores proveer subtítulos, títulos, descripciones, capítulos o metadatos para elementos de medios (audio y video). La información textual es provista en un archivo separado, que puede estar en cualquier formato soportado por los navegadores, aunque el W3C provee un estándar recomendado denominado WebVTT.

Siendo relativamente nuevo, el elemento track no es completamente soportado por los navegadores. Los autores no deberían confiar en este elemento para mostrar información importante.

Dependiendo del valor del atributo kind, el elemento track puede ser usado para mostrar cinco tipos diferentes de información. Los navegadores mostrarán las pistas de texto de acuerdo al tipo de información que éstas representan.

  • subtitles: una transcripción o traducción del audio, pensado para aquellos casos en los que el audio se escucha adecuadamente pero no es comprendido, como cuando el usuario lo comprende el lenguaje hablado en el recurso. Los navegadores deberían mostrar esta información como texto superpuesto en el video. Este es el valor por defecto.
  • captions: información relevante de audio para ayudar a los usuario que no pueden escuchar apropiadamente el recurso, como cuando el usuario es sordo, cuando el recurse se encuentra silenciado o cuando el ruido del ambiente es elevado. Los navegadores deberían mostrar esta información como texto superpuesto en el video.
  • descriptions: una descripción que explica al video (o a una parte de él), pensada para ayudar a los usuarios que no pueden verlo apropiadamente, como cuando el usuario es ciego, cuando está conduciendo o cuando el brillo de su pantalla tiene baja intensidad. Los navegadores deberían usar sintetizadores de voz para reproducir el contenido textual.
  • chapters: títulos de los capítulos, pensados para permitir a los usuarios navegar el recurso de medios. Los navegadores pueden proveerlos como una lista interactiva.
  • metadata: pensado únicamente para su uso con programas, no son mostrados por el navegador.

Si el atributo kind es omitido, los navegadores deberían considerar a las pistas de texto como subtítulos.

Ejemplos

En el primer ejemplo, agregaremos subtítulos ("captions" y "subtitles") a un video con el uso de track. Estas pistas de texto son provistas en dos archivos WebVTT. Nota la correcta configuración del atributo kind en cada caso.

<video width="384" height="288" controls>
  <source src="../../../videos/Cyrano_de_Beryerac.mp4" type="video/mp4">
  <source src="../../../videos/Cyrano_de_Beryerac.webm" type="video/webm">
  <source src="../../../videos/Cyrano_de_Beryerac.ogg" type="video/ogg">
  <track kind="captions" label="Captions" src="../../../videos/Cyrano_de_Beryerac_EN.vtt" srclang="en"></track>
  <track kind="subtitles" label="Subtítulos en español" src="../../../videos/Cyrano_de_Beryerac_ES.vtt" srclang="es"></track>
</video>

A continuación intentaremos agregar el mismo tipo de pistas a un archivo de sonido insertado con el elemento audio.

Hasta el 21/11/2014, ningún navegador muestra pistas de texto para el elemento audio. Es de esperarse que el siguiente ejemplo no muestre subtítulos en tu navegador.

<audio controls>
  <source src="../../../audio/Frankenstein_Chapter_5.ogg" type="audio/ogg">
  <source src="../../../audio/Frankenstein_Chapter_5.mp3" type="audio/mpeg">
  <track kind="captions" label="Captions" src="../../../audio/Frankenstein_Chapter_5_EN.vtt" srclang="en"></track>
  <track kind="subtitles" label="Subtítulos en español" src="../../../audio/Frankenstein_Chapter_5_ES.vtt" srclang="es"></track>
</audio>

Atributos

Atributos específicos

kind

Un valor enumerado que indica el tipo de pista de texto provista por este elemento. Existen cinco valores posibles, todos insensibles a mayúsculas/minúsculas:

  • subtitles: una transcripción o traducción del audio, pensado para aquellos casos en los que el audio se escucha adecuadamente pero no es comprendido, como cuando el usuario no comprende el lenguaje hablado en el recurso. Los navegadores deberían mostrar esta información como texto superpuesto en el video. Este es el valor por defecto.
  • captions: información relevante de audio para ayudar a los usuarios que no pueden escuchar apropiadamente el recurso, como cuando el usuario es sordo, cuando el recurso se encuentra silenciado o cuando el ruido de ambiente es elevado. Los navegadores deberían mostrar esta información como texto superpuesto en el video.
  • descriptions: una descripción que explica al video (o a una parte de él), pensada para ayudar a los usuarios que no pueden verlo apropiadamente, como cuando el usuario es ciego, cuando está conduciendo o cuando el brillo de su pantalla tiene baja intensidad. Los navegadores deberían usar sintetizadores de voz para reproducir el contenido textual.
  • chapters: títulos de los capítulos, pensados para permitir a los usuarios navegar el recurso de medios. Los navegadores pueden proveerlos en una lista interactiva.
  • metadata: pensado únicamente para su uso con programas, no son mostrados por el navegador.

Si el atributo kind es omitido, los navegadores deberían considerar a las pistas de texto como subtítulos.

Ejemplo

<video src="Segunda_guerra_mundial.mp4" width="800" height="600" controls>
  <track kind="captions" label="Captions" src="World_war_II_EN.vtt" srclang="en"></track>
  <track kind="subtitles" label="Subtítulos en español" src="World_war_II_ES.vtt" srclang="es"></track>
</video>

src

El URI (ubicación) del recurso que contiene la información de las pistas. Este recurso puede ser provisto en cualquier formato soportado por los navegadores, pero el estándar recomendado para la web es WebVTT.

El atributo src es obligatorio en este elemento, ya que apunta al recurso que contiene las pistas de texto, sin las cuales el elemento no tendría nada que mostrar.

Ejemplo

<video src="Bella_y_la_bestia.mp4" width="1080" height="720" controls>
  <track kind="subtitles" label="Subtítulos en español" src="Beauty_and_the_beast_ES.vtt" srclang="es"></track>
</video>

srclang

Una etiqueta de lenguaje que identifica al lenguaje utilizado por el recurso apuntado en el atributo src.

La presencia de este atributo es obligatoria cuando el atributo kind toma el valor "subtitles". En otro caso puede omitirse.

Ejemplo

<video src="Il_mondo_gira.mp4" width="800" height="600" controls>
  <track kind="subtitles" label="Subtitles in english" src="Il_mondo_gira_EN.vtt" srclang="en"></track>
  <track kind="subtitles" label="Subtítulos en español" src="Il_mondo_gira_ES.vtt" srclang="es"></track>
</video>

label

Un título (destinado a los usaurios) que describe la naturaleza o propósito de la pista de texto. Cuando el atributo type toma los valores subtitle, caption ó description, los navegadores pueden usar la información contenida en este atributo para listar las pistas en la interfaz de usuario, con el fin de permitir a los usuarios seleccionarlas.

Ejemplo

<video src="Moby_Dick.mp4" width="1080" height="720" controls>
  <track kind="subtitles" label="Subtítulos en español" src="Moby_Dick_ES.vtt" srclang="es"></track>
</video>

default

Un valor booleano que indica si la pista de texto debe ser cargada cuando ninguna otra pista es más aprpopiada de acuerdo a las preferencias del usuario. Cuando este atributo toma el valor "default" o la cadena vacía (""), o cuando está simplemente presente, la pista de texto se convierte en la predeterminada.

Ejemplo

<video src="Seconda_guerra_mondiale.mp4" width="800" height="600" controls>
  <track kind="subtitles" label="Subtitles in english" src="Seconda_guerra_mondiale_EN.vtt" srclang="en" default></track>
  <track kind="subtitles" label="Subtítulos en español" src="Seconda_guerra_mondiale_ES.vtt" srclang="es"></track>
</video>

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.