<track>: El elemento pista de texto incrustado

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

El elemento HTML <track> se utiliza como elemento hijo de los elementos multimedia, <audio> y <video>. Le permite especificar pistas de texto cronometradas (o datos basados en el tiempo), por ejemplo, para manejar subtítulos automáticamente. Las pistas están formateadas en formato WebVTT (archivos .vtt): Web Video Text Tracks (pistas de texto de video web).

Pruébalo

Categorías de contenido Ninguno
Contenido permitido Ninguno, es un elemento vacío
Omisión de la etiqueta Como es un elemento vacío, la etiqueta de inicio debe estar presente y no debe tener la etiqueta de cierre.
Padres permitidos

Un elemento multimedia, <audio> o <video>.

Rol ARIA implícito Sin rol correspondiente
Roles ARIA permitidos No se permite role
Interfaz DOM HTMLTrackElement

Atributos

Este elemento incluye los atributos globales.

default

Este atributo indica que la pista debe habilitarse a menos que las preferencias del usuario indiquen que otra pista es más apropiada. Esto solo se puede usar en un elemento track por elemento multimedia.

kind

Cómo debe usarse la pista de texto. Si se omite, el tipo predeterminado es subtitles. Si el atributo contiene un valor no válido, utilizará metadata (las versiones de Chrome anteriores a la 52 trataron un valor no válido como subtitles). Se permiten las siguientes palabras clave:

  • subtitles

    • Los subtítulos proporcionan traducción de contenido que el espectador no puede entender. Por ejemplo, habla o texto que no está en inglés en una película en inglés.
    • Los subtítulos pueden contener contenido adicional, generalmente información de fondo adicional. Por ejemplo, el texto al comienzo de las películas de Star Wars, o la fecha, la hora y la ubicación de una escena.
  • captions

    • Los subtítulos ofrecen una transcripción y posiblemente una traducción del audio.
    • Puede incluir información no verbal importante, como pistas musicales o efectos de sonido. Puede indicar la fuente de la señal (por ejemplo, música, texto, personaje).
    • Adecuado para usuarios sordos o cuando el sonido está silenciado.
  • descriptions

    • Descripción textual del contenido del video.
    • Apto para usuarios ciegos o cuando no se puede ver el vídeo.
  • chapters

    • Los títulos de los capítulos están destinados a ser utilizados cuando el usuario navega por el recurso multimedia.
  • metadata

    • Pistas utilizadas por los scripts. No visible para el usuario.
label

Un título legible por el usuario de la pista de texto que utiliza el navegador cuando enumera las pistas de texto disponibles.

src

Dirección de la pista (archivo .vtt). Debe ser una URL válida. Este atributo debe especificarse y su valor de URL debe tener el mismo origen que el documento, a menos que el elemento principal <audio> o <video> del elemento track tenga un atributo de origen cruzado.

srclang

Idioma del texto de la pista. Debe ser una etiqueta de idioma BCP 47 válida. Si el atributo kind se establece en subtitles, se debe definir srclang.

Notas de uso

Tipos de datos de pista

El tipo de datos que track agrega a los medios se establece en el atributo kind, que puede tomar valores de subtitles, captions, descriptions, chapters o metadata. El elemento apunta a un archivo de origen que contiene texto cronometrado que el navegador expone cuando el usuario solicita datos adicionales.

Un elemento multimedia no puede tener más de un track con el mismo kind, srclang y label.

Detectar cambios de señal

El TextTrack subyacente, indicado por la propiedad track, recibe un evento cuechange cada vez que se cambia la señal actual. Esto sucede incluso si la pista no está asociada con un elemento multimedia.

Si la pista está asociada con un elemento de medios, usando el elemento <track> como elemento hijo del elemento <audio> o <video>, el evento cuechange también se envía a HTMLTrackElement.

js
let textTrackElem = document.getElementById("texttrack");

textTrackElem.addEventListener("cuechange", (event) => {
  let cues = event.target.track.activeCues;
});

Ejemplos

html
<video controls poster="/images/sample.gif">
  <source src="sample.mp4" type="video/mp4" />
  <source src="sample.ogv" type="video/ogv" />
  <track kind="captions" src="sampleCaptions.vtt" srclang="en" />
  <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en" />
  <track kind="chapters" src="sampleChapters.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de" />
  <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja" />
  <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz" />
  <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1" />
  <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2" />
  <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3" />
  <!-- Fallback -->
  ...
</video>

Especificaciones

Specification
HTML Standard
# the-track-element

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también