Tag HTML <track>

A tag <track> é um dos elementos HTML5. Ela adiciona faixas de texto temporizado — legendas, legendas para surdos, descrições, capítulos ou metadados — a um elemento de mídia <video> ou <audio>. Uma faixa é a forma padrão de tornar a mídia acessível: permite que espectadores surdos ou com deficiência auditiva leiam o que está sendo dito, ajuda falantes não nativos a acompanhar o conteúdo e permite que os navegadores ofereçam navegação por capítulos.

O elemento <track> é sempre filho de um elemento <video> ou <audio>, posicionado após quaisquer elementos <source>. Ele é vazio e aponta (via src) para um arquivo externo WebVTT (.vtt) que contém o texto temporizado. O navegador exibe esse texto automaticamente enquanto a mídia é reproduzida.

Um único elemento de mídia pode conter vários elementos <track> — por exemplo, um para cada idioma — mas não pode ter duas faixas que compartilhem o mesmo kind, srclang e label.

Sintaxe

A tag <track> é vazia, o que significa que a tag de fechamento não é necessária. Mas em XHTML, a tag <track> deve ser fechada automaticamente (<track />).

Tag HTML <track>

<audio> or <video>
  ...
  <track src="...">
  ...
</audio> or </video>

Exemplo da tag HTML `<track>`:

Tag HTML <track>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
        width: 300px; 
        height: 200px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
      <track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).vtt"/>
    </video>
    <p>Some information about video</p>
  </body>
</html>

Experimente Você Mesmo »

Atributos

Atributo	Valor	Descrição
`default`	`default`	Marca a faixa como a que deve ser habilitada por padrão, a menos que as preferências do usuário indiquem que outra é mais adequada. Apenas uma faixa por elemento de mídia pode ter este atributo.
`kind`	`subtitles`, `captions`, `descriptions`, `chapters`, `metadata`	Define o tipo de faixa de texto (veja a tabela abaixo). O valor padrão é `subtitles`.
`label`	`text`	Um título legível para a faixa. Este é o nome exibido ao usuário no menu de seleção de faixas do player (por exemplo, "English", "Français").
`src`	`URL`	O caminho para o arquivo WebVTT (`.vtt`). Obrigatório.
`srclang`	`language_code`	O idioma do texto da faixa como uma tag BCP 47 (por exemplo, `en`, `fr`, `pt-BR`). Obrigatório quando `kind="subtitles"`.

Valores do atributo `kind`

Valor	Finalidade
`subtitles`	Tradução do diálogo para espectadores que conseguem ouvir, mas podem não entender o idioma. Requer `srclang`.
`captions`	Uma transcrição do diálogo mais sons não verbais (efeitos sonoros, sinais musicais, quem está falando). Destinado a espectadores surdos ou com deficiência auditiva.
`descriptions`	Descrições em texto do conteúdo visual do vídeo, destinadas a ser lidas em voz alta (síntese de fala) para usuários cegos ou com baixa visão quando a ação não é transmitida pelo áudio.
`chapters`	Títulos de capítulos usados para navegar na mídia.
`metadata`	Dados para uso por scripts. Esta faixa não é exibida ao usuário.

A tag <track> também suporta os atributos globais e os atributos de evento.

O que é um arquivo WebVTT?

O texto exibido por uma <track> fica em um arquivo separado escrito no formato WebVTT (Web Video Text Tracks), salvo com a extensão .vtt e servido como text/vtt. Todo arquivo WebVTT começa com a linha WEBVTT, seguida de uma ou mais cues. Cada cue tem um intervalo de tempo (start --> end, no formato hh:mm:ss.ttt) e o texto a ser exibido durante esse intervalo:

WEBVTT

00:00:01.000 --> 00:00:04.000
Welcome to the demo video.

Você pode ter muitos cues, opcionalmente separados por linhas em branco, e cada cue pode conter uma linha de ID opcional acima do seu timestamp. O navegador compara o tempo de reprodução atual com um cue e renderiza seu texto sobre a mídia.

Exemplo com múltiplas faixas

Uma configuração comum é oferecer legendas para surdos em um idioma e legendas em outro. Dê a cada faixa um label claro para que os usuários possam escolher a correta no menu do player, e marque uma única faixa como default:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <video
      controls
      width="320"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4"
    >
      <track
        default
        kind="captions"
        srclang="en"
        label="English"
        src="captions-en.vtt"
      />
      <track
        kind="subtitles"
        srclang="fr"
        label="Français"
        src="subtitles-fr.vtt"
      />
    </video>
  </body>
</html>

O player exibe as entradas "English" e "Français" no seu menu de legendas; as legendas em inglês aparecem por padrão porque essa faixa possui o atributo default.

Acessibilidade

O elemento <track> é o mecanismo HTML para atender aos principais critérios de sucesso do WCAG:

Legendas para surdos (WCAG 1.2.2) — forneça um <track kind="captions"> para que usuários surdos ou com deficiência auditiva possam perceber tanto o diálogo quanto os sons importantes em mídias pré-gravadas.
Descrição de áudio (WCAG 1.2.3 / 1.2.5) — forneça um <track kind="descriptions"> para que usuários cegos ou com baixa visão obtenham uma descrição das informações visuais importantes.

Como o texto da faixa é texto temporizado em um arquivo separado, os mecanismos de busca e as tecnologias assistivas também podem lê-lo, o que melhora tanto a acessibilidade quanto a descoberta do conteúdo.

Prática

O que o elemento track do HTML faz?

Ele especifica uma faixa de áudio extra dentro de um elemento de áudio.Ele adiciona faixas de texto temporizado (legendas, descrições, capítulos ou metadados) a mídias de vídeo e áudio.Ele adiciona uma folha de estilos CSS a um documento HTML.Ele incorpora um arquivo de vídeo externo diretamente na página.