<track>: El elemento para pistas de texto incrustado
Pruébalo
El elmento HTML <track>
es usado como hijo de los elementos multimedia, <audio>
y <video>
. Este te deja especificar pistas de texto temporizadas (o datos basados en el tiempo), por ejemplo para manejar automáticamente los subtítulos. Las pistas de texto usan el formato WebVTT (archivos .vtt
) o de pistas de texto para la web.
Categorías del contenido | Ninguna |
---|---|
Contenido permitido | Ninguno, es un empty element. |
Omision de etiquetas | Como es un elemento vacío, la etiqueta de inicio debe estar presente y la etiqueta de cierre no debe estar presente. |
Padres permitidos | Un elemento multimedia, <audio> o <video> . |
Rol ARIA implícito | No hay rol correspondiente. |
Roles ARIA permitidos | No hay role s permitidos. |
Intefaz DOM | HTMLTrackElement (en-US) |
Atributos
Este elemento incluye los atributos globales.
default
- Este atributo indica que esta pista de texto debe estar activada salvo que las preferencias del usuario indiquen que otra pista de texto es más apropiada. Este atributo solo puede ser usado en un elemento
track
por cada elemento multimedia. kind
- Este atributo indica como esta pensada para usarse la pista de texto. Si lo omites el valor por defecto es
subtitles
. If the attribute contiene un valor invalido usará el valormetadata
(Las versiones de Chrome anteriores a la 52 tratan un valor inválido comosubtitles
). Las siguientes palabras clave están permitidas:subtitles
- Los subtítulos proporciona la traducción de contenido que no puede ser entendido por el espéctador. Por ejemplo diálogos o texto que no está en español en una película en español.
- Los subtítulos puede contener información adicional, normalmente información extra sobre el escenario. Por ejemplo el texto al principio de las películas de Stars Wars, o la fecha, el tiempo, y la ubicación de una escena.
captions
- Este valor provee una transcripción y posiblemente una traducción del audio.
- Puede incluir información no verbal importante como anotaciones sobre la música o efectos de sonido. Tambien puede indicar la fuente de la anotación (por ejemplo: música, texto, caracteres).
- Es adecuado para usuarios sordos o cuando el sonido está apagado.
descriptions
- Descripción textual del conenido del video.
- Adecuado para usuarios ciegos o cuando el video no se puede ver.
chapters
- Los títulos de los capítulos estan pensados para ser usados cuando el usuario esta navegando a través del recurso multimedia.
metadata
- Pistas de texto usadas por programas. No visibles para el usuario.
label
- Da un título a la pista de texto que puedan entender los usuarios y que es usado por el navegador cuando esta mostrando la lista de pistas de texto disponibles.
src
- Señala la dirección de la pista de texto (archivo
.vtt
). Debe ser una URL valida. Este atributo debe ser especificado y su URL debe tener el mismo origen que el documento, salvo que el elemento<audio>
o<video>
que sea padre del elementotrack
tenga un atributocrossorigin
. srclang
- Señala el idioma de los datos de la pista de texto. Debe ser una etiqueta de idioma BCP 47 valida. Si al atributo
kind
se le da el valor desubtitles
, entoncessrclang
debe ser definido.
Notas de uso
Tipos de datos para pistas de texto
El tipo de dato que el elemento track
añade al elemento multimedia es fijado en el atributo kind
, que puede tener los valores de subtitles
, captions
, descriptions
, chapters
or metadata
. El elemento apunta a un archivo fuente que contiene texto temporizado que el navegador muestra cuando el usuario solicita datos adicionales.
Un elemento media
no puede tener mas de un elemento track
con el mismo valor en los atributos kind
, srclang
, y label
a la vez.
Detectando cambios en las anotaciones
El subyacente TextTrack
, indicado por la propiedad track
, recive un evento cuechange
cada vez que la anotación que esta siendo actualmente presentada cambia. Est sucede incluso si la pista de texto no está asociada cun un elemento multimedia.
Si la pista de texto está asociada con el elemento multimedia, usando el elemento <track>
como hijo del elemento <audio>
o del elemento <video>
, el evento cuechange
es también enviado al HTMLTrackElement
(en-US).
let textTrackElem = document.getElementById("texttrack");
textTrackElem.addEventListener("cuechange", (event) => {
let cues = event.target.track.activeCues;
});
Además, puedes utilizar el controlador de eventos oncuechange
:
let textTrackElem = document.getElementById("texttrack");
textTrackElem.oncuechange = (event) => {
let cues = event.target.track.activeCues;
});
Ejemplos
<video controls poster="/imagenes/ejemplo.gif">
<source src="ejemplo.mp4" type="video/mp4">
<source src="ejemplo.ogv" type="video/ogv">
<track kind="captions" src="captionsDeEjemplo.vtt" srclang="en">
<track kind="descriptions" src="descripciónDeEjemplo.vtt" srclang="en">
<track kind="chapters" src="capítulosDeEjemplo.vtt" srclang="en">
<track kind="subtitles" src="subtítulosDeEjemplo_de.vtt" srclang="de">
<track kind="subtitles" src="subtítulosDeEjemplo_en.vtt" srclang="en">
<track kind="subtitles" src="subtítulosDeEjemplo_ja.vtt" srclang="ja">
<track kind="subtitles" src="subtítulosDeEjemplo_oz.vtt" srclang="oz">
<track kind="metadata" src="etapaClave1.vtt" srclang="en"
label="Etapa clave 1">
<track kind="metadata" src="etapaClave2.vtt" srclang="en"
label="Etapa clave 2">
<track kind="metadata" src="etapaClave3.vtt" srclang="en"
label="Etapa clave 3">
<!-- Fallback -->
...
</video>
Especificaciones
Especificación | Estado | Comentarios |
---|---|---|
HTML Living Standard La definición de 'track element' en esta especificación. |
Living Standard | |
HTML5 La definición de 'track element' en esta especificación. |
Recommendation | Definición inicial. |
Compatibilidad con los navegadores
BCD tables only load in the browser