<track>

Você está lendo a versão em inglês deste conteúdo porque ainda não há uma tradução para este idioma. Ajude-nos a traduzir este artigo!

O elemento HTML <track> é usado como filho dos elementos de mídia<audio> e <video>. Ele permite que você especifique faixas de texto temporizadas (ou dados baseados em tempo), por exemplo, para lidar automaticamente com legendas. As faixas são formatadas em WebVTT format (arquivos .vtt) — Web Video Text Tracks or Timed Text Markup Language (TTML).

Categorias de conteúdo Nenhuma
Conteúdo permitido Nenhum, é um empty element.
Omissão de tag Como é um elemento vazio, a tag inicial deve estar presente e a tag final não deve estar presente.
Permite Parentes Um elemento de mídia, antes de qualquer conteúdo de fluxo.
Funções ARIA permitidas Nenhum
Interface DOM HTMLTrackElement

Atributos

Este elemento inclui os atributos globais.

default
This attribute indicates that the track should be enabled unless the user's preferences indicate that another track is more appropriate. This may only be used on one track element per media element.
kind
How the text track is meant to be used. If omitted the default kind is subtitles. If the attribute is not present, it will use the subtitles. If the attribute contains an invalid value, it will use metadata. (Versions of Chrome earlier than 52 treated an invalid value as subtitles.) The following keywords are allowed:
  • subtitles
    • Subtitles provide translation of content that cannot be understood by the viewer. For example dialogue or text that is not English in an English language film.
    • Subtitles may contain additional content, usually extra background information. For example the text at the beginning of the Star Wars films, or the date, time, and location of a scene.
  • captions
    • Closed captions provide a transcription and possibly a translation of audio.
    • It may include important non-verbal information such as music cues or sound effects. It may indicate the cue's source (e.g. music, text, character).
    • Suitable for users who are deaf or when the sound is muted.
  • descriptions
    • Textual description of the video content.
    • Suitable for users who are blind or where the video cannot be seen.
  • chapters
    • Chapter titles are intended to be used when the user is navigating the media resource.
  • metadata
    • Tracks used by scripts. Not visible to the user.
label
A user-readable title of the text track which is used by the browser when listing available text tracks.
src
Address of the track (.vtt file). Must be a valid URL. This attribute must be specified and its URL value must have the same origin as the document — unless the <audio> or <video> parent element of the track element has a crossorigin attribute.
srclang
Language of the track text data. It must be a valid BCP 47 language tag. If the kind attribute is set to subtitles, then srclang must be defined.

Usage notes

The type of data that track adds to the media is set in the kind attribute, which can take values of subtitles, captions, descriptions, chapters or metadata. The element points to a source file containing timed text that the browser exposes when the user requests additional data.

A media element cannot have more than one track with the same kind, srclang, and label.

Examples

<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>

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'track element' in that specification.
Padrão em tempo real  
HTML5
The definition of 'track element' in that specification.
Recomendação Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
trackChrome Full support 23Edge Full support YesFirefox Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10Opera Full support 12.1Safari Full support 6WebView Android Full support Yes
Notes
Full support Yes
Notes
Notes Doesn't work for fullscreen video.
Chrome Android Full support 25
Notes
Full support 25
Notes
Notes Doesn't work for fullscreen video.
Firefox Android Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS Full support 6Samsung Internet Android Full support 1.5
Notes
Full support 1.5
Notes
Notes Doesn't work for fullscreen video.
cuechange eventChrome Full support YesEdge ? Firefox Full support 68IE No support NoOpera ? Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 68Opera Android ? Safari iOS Full support YesSamsung Internet Android Full support Yes
defaultChrome Full support 23Edge Full support YesFirefox Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10Opera Full support 12.1Safari Full support 6WebView Android Full support 4.4Chrome Android Full support 25Firefox Android Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Full support 1.5
kindChrome Full support 23Edge Full support YesFirefox Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10Opera Full support 12.1Safari Full support 6WebView Android Full support 4.4Chrome Android Full support 25Firefox Android Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Full support 1.5
labelChrome Full support 23Edge Full support YesFirefox Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10Opera Full support 12.1Safari Full support 6WebView Android Full support 4.4Chrome Android Full support 25Firefox Android Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Full support 1.5
srcChrome Full support 23Edge Full support YesFirefox Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10Opera Full support 12.1Safari Full support 6WebView Android Full support 4.4Chrome Android Full support 25Firefox Android Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Full support 1.5
srclangChrome Full support 23Edge Full support YesFirefox Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10Opera Full support 12.1Safari Full support 6WebView Android Full support 4.4Chrome Android Full support 25Firefox Android Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Full support 1.5

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

See also