0Pricing
HTML Academy · Aula

Legendas com track e WebVTT

Adicione legendas e subtítulos a vídeos com track e arquivos .vtt.

Legendas com track e WebVTT é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

Legendas e legendas descritivas

A acessibilidade de video exige alternativas textuais para o conteúdo de áudio:

  • Legendas — transcrição dos diálogos, pressupondo que o espectador consiga ouvir os sons
  • Legendas descritivas — diálogos + descrições dos sons (para pessoas surdas)
  • Audiodescrições — descrevem o conteúdo visual para pessoas cegas

O elemento de faixa

O elemento <track> vincula um arquivo de legendas ou legendas descritivas a um video:

<video controls>
  <source src="tutorial.mp4" type="video/mp4">
  <track
    src="tutorial-en.vtt"
    kind="subtitles"
    srclang="en"
    label="English"
    default
  >
  <track
    src="tutorial-es.vtt"
    kind="subtitles"
    srclang="es"
    label="Spanish"
  >
</video>

Atributos de faixa

Atributos do elemento de faixa:

  • src — caminho para o arquivo VTT
  • kind — tipo de faixa (legendas, legendas descritivas, audiodescrições, capítulos, metadados)
  • srclang — código de idioma BCP 47 (en, es, fr...)
  • label — nome legível exibido no menu CC
  • default — booleano; esta faixa é exibida por padrão

Formato WebVTT

WebVTT (faixas de texto de video na Web) é o formato de arquivo de legendas:

WEBVTT

00:00:01.000 --> 00:00:04.000
Hello and welcome to the HTML5 tutorial.

00:00:04.500 --> 00:00:08.000
In this lesson, we'll cover the video element
and how to add subtitles.

00:00:09.000 --> 00:00:12.000
[Keyboard click sounds]
Let's look at a code example...

Identificadores de marcações VTT

As marcações VTT podem ter identificadores opcionais:

WEBVTT

intro-1
00:00:01.000 --> 00:00:04.000
Welcome to the tutorial.

intro-2
00:00:04.500 --> 00:00:08.000
We'll cover HTML5 video today.

00:00:09.000 --> 00:00:12.000
No identifier on this cue — that is fine.

Configurações de marcações VTT

As marcações VTT oferecem suporte a configurações de posicionamento:

WEBVTT

00:00:01.000 --> 00:00:04.000 position:10% align:left
This text is positioned at the left.

00:00:05.000 --> 00:00:08.000 line:10%
This text appears near the top.

00:00:09.000 --> 00:00:12.000 size:50% position:75%
A smaller caption on the right.

Estilizando marcações WebVTT com CSS

Estilize as caixas de marcação com o pseudoelemento ::cue:

/* Style all cues: */
::cue {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 1.2rem;
  font-family: 'Arial', sans-serif;
  padding: 0.2em 0.5em;
  border-radius: 4px;
}

/* Style specific voice tags: */
::cue(v[voice="Teacher"]) {
  color: #60a5fa;
}

Valores de tipo de faixa

O atributo kind especifica a finalidade da faixa de texto:

  • subtitles — tradução ou transcrição dos diálogos
  • captions — diálogos + descrições de sons para pessoas surdas
  • descriptions — audiodescrição do conteúdo visual para pessoas cegas
  • chapters — títulos de capítulos para navegação
  • metadata — dados legíveis por máquina para JavaScript

Faixa de capítulos

Use kind=chapters para a navegação pelos capítulos do video:

<track
  kind="chapters"
  src="chapters.vtt"
  srclang="en"
  label="Chapters"
>

<!-- chapters.vtt: -->
<!--
WEBVTT

00:00:00.000 --> 00:01:30.000
Introduction

00:01:30.000 --> 00:05:00.000
HTML Document Structure

00:05:00.000 --> 00:10:00.000
Forms and Input
-->

API TextTrack do JavaScript

Acesse os dados da faixa com a API TextTrack:

const video = document.getElementById('tutorial');
const tracks = video.textTracks;

// Enable a track:
tracks[0].mode = 'showing';  // 'hidden', 'showing', or 'disabled'

// Listen for active cue changes:
tracks[0].addEventListener('cuechange', function() {
  const cue = this.activeCues[0];
  if (cue) console.log('Current cue:', cue.text);
});

Faixa de metadados para video interativo

Use faixas de metadados para disparar eventos JavaScript em momentos específicos:

<track kind="metadata" src="interactive.vtt" id="meta-track">

<script>
video.textTracks[0].mode = 'hidden';
video.textTracks[0].addEventListener('cuechange', function() {
  const cue = this.activeCues[0];
  if (cue) {
    const data = JSON.parse(cue.text);
    // Trigger quiz, show annotation, etc.
    showAnnotation(data);
  }
});
</script>

Requisitos de acessibilidade

WCAG exige legendas para video pré-gravado:

  • Nível A — legendas para todo video pré-gravado com áudio
  • Nível AA — audiodescrições para todo video pré-gravado
  • Legendas geradas automaticamente (YouTube) são insuficientes sem revisão
  • As legendas devem ser precisas, sincronizadas e completas

Verificação rápida

Qual é a diferença entre os tipos de faixa subtitles e captions?

Recapitulação: faixa e WebVTT

Elementos essenciais de legendas:

  • <track src kind srclang label default> dentro de video
  • kind: subtitles, captions, descriptions, chapters, metadata
  • Formato de arquivo WebVTT: WEBVTT + marca de tempo --> marca de tempo + texto
  • Estilize as marcações com o pseudoelemento CSS ::cue
  • WCAG exige legendas para video pré-gravado

Perguntas Frequentes

A aula “Legendas com track e WebVTT” é grátis?

Sim — o texto completo de “Legendas com track e WebVTT” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “Legendas com track e WebVTT”?

Adicione legendas e subtítulos a vídeos com track e arquivos .vtt. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Legendas com track e WebVTT”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. O elemento audio: src controls loop autoplay
  2. O elemento video e a proporção da tela
  3. O elemento source para vários formatos
  4. Legendas com track e WebVTT
← Voltar para HTML Academy