<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 | |
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 comosubtitles
). 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 elementotrack
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 ensubtitles
, se debe definirsrclang
.
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
.
let textTrackElem = document.getElementById("texttrack");
textTrackElem.addEventListener("cuechange", (event) => {
let cues = event.target.track.activeCues;
});
Ejemplos
<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