O que é WebVTT?

WebVTT (Web Video Text Tracks Format) é um formato de legenda baseado em texto usado para adicionar faixas de texto cronometrado a vídeos. É o formato oficial suportado pelo HTML5 através do elemento <track>, permitindo que você adicione:

• Legendas (fala traduzida)
• Closed captions (fala e efeitos sonoros)
• Descrições (informação visual para leitores de tela)
• Capítulos (pontos navegáveis no vídeo)
• Metadados

Estrutura Básica do WebVTT

• Um arquivo WebVTT consiste em:
  • Um cabeçalho opcional (WEBVTT).
  • Metadados opcionais (comentários ou blocos de estilo/script).
  • Cues (segmentos de texto com temporização e conteúdo).

1. Formato de Cue

Um cue tem a seguinte estrutura:

[HH:]MM:SS.mmm --> [HH:]MM:SS.mmm [cue settings]
Text payload...

• Temporização: tempos de início e fim no formato HH:MM:SS.mmm.
• Configurações (opcional):
  • vertical (lr/rl para texto vertical)
  • line (posicionamento)
  • position (alinhamento horizontal)
  • size (largura/porcentagem)
  • align (início/meio/fim)

2. Payload do Cue

• Pode ser texto simples ou incluir marcação:
  • Tags: <b>, <i>, <u>, <ruby>, <lang>, etc.
  • Carimbos de tempo (<00:00:05.000>) para texto estilo karaokê.

3. Estilização e CSS

• A estilização pode ser aplicada via:
  • Cues inline (usando tags).
  • Pseudo‑elementos CSS (::cue, ::cue-region) em HTML.

4. Faixas de Metadados

• WebVTT pode transportar metadados (JSON, etc.) para aplicações interativas.

5. Codificação do Arquivo

• Deve ser codificado em UTF-8.
• As linhas terminam com \r\n, \n ou \r.

6. Regras de Processamento

• Os analisadores devem lidar com arquivos malformados de forma graciosa.
• BOM (Byte Order Mark) é opcional.

7. Integração com HTML5

• Usado com o elemento <track>:

  <video>
    <track src="subtitles.vtt" kind="subtitles" srclang="en" default>
  </video>
  

  • kind pode ser subtitles, captions, descriptions, chapters ou metadata.

8. Suporte dos Navegadores

• Amplamente suportado nos navegadores modernos (Chrome, Firefox, Safari, Edge).

9. Casos de Uso

• Legendas/Closed Captions para acessibilidade.
• Letras de karaokê com texto cronometrado.
• Navegação por capítulos em vídeos.
• Metadados para aplicativos de vídeo interativos.

Exemplo de um Arquivo WebVTT:

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to our tutorial on WebVTT.

00:00:04.000 --> 00:00:08.000
In this video, you'll learn how to add subtitles to your HTML5 videos.

Os motores de busca não podem “assistir” ao seu vídeo — mas podem ler conteúdo baseado em texto. Ao usar arquivos WebVTT, você adiciona texto indexável que:

• Melhora a descoberta: o Google pode indexar legendas e transcrições, fazendo com que seus vídeos apareçam em mais resultados de busca.
• Aumenta o engajamento: vídeos legendados mantêm os usuários engajados por mais tempo — aumentando a duração da sessão e reduzindo a taxa de rejeição.
• Aumenta a acessibilidade: legendas são essenciais para usuários surdos ou com deficiência auditiva, e são favorecidas nos algoritmos de ranking de SEO.

Quando um arquivo WebVTT está associado a um vídeo em uma página web, o Google pode analisar e entender esse texto cronometrado, tornando o conteúdo mais relevante para determinadas consultas.

Como Adicionar WebVTT a um Vídeo HTML5

Você pode incluir um arquivo WebVTT no seu vídeo usando o elemento <track>:

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

• src: caminho para o seu arquivo .vtt
• kind: tipo da faixa de texto (subtitles, captions, chapters, etc.)
• srclang: código do idioma (ex.: en, es)
• label: rótulo da faixa exibido no player

WebVTT vs SRT: Qual a Diferença?

Ferramentas para Criar e Editar Arquivos WebVTT

• Editores de Texto: VS Code, Sublime Text
• Editores de Legendas: Subtitle Edit, Amara, Aegisub
• Conversores: Use ferramentas para converter SRT para VTT e vice‑versa

Como abrir arquivo WebVTT?

Para abrir um arquivo WebVTT (.vtt), você pode usar qualquer editor de texto ou editor de legendas.

Abrir em um Editor de Texto

• Windows: Notepad, Notepad++, VS Code
• macOS: TextEdit, Sublime Text
• Linux: Gedit, nano, Vim

Como os arquivos .vtt são texto simples, você pode visualizá‑los e editá‑los como qualquer arquivo de texto comum.

Abrir em um Editor de Legendas

Para melhor formatação, pré‑visualização e sincronização:

• Subtitle Edit (Windows)
• Aegisub (multiplataforma)
• Amara (baseado na web)

Abrir em um Navegador

1. Crie um arquivo HTML simples com as tags <video> e <track>.
2. Abra o arquivo HTML em um navegador para visualizar o vídeo com legendas.

Características Principais dos Arquivos ASS

Perguntas Frequentes

Q1: Qual a diferença entre WebVTT e SRT?

R: O WebVTT é baseado no SRT, mas adiciona recursos essenciais como posicionamento de texto, tags de voz, estilização CSS e suporte a metadados, além de integração nativa com vídeo HTML5.

Q2: Como adiciono legendas WebVTT ao YouTube?

R: Faça upload do seu arquivo .vtt ao adicionar legendas ao seu vídeo, ou use a legendagem automática do YouTube e baixe o arquivo WebVTT gerado para edição.

Q3: Arquivos WebVTT podem incluir imagens?

R: A especificação WebVTT não suporta diretamente imagens incorporadas, mas você pode usar cues de metadados com URLs e implementar a renderização de imagens personalizada via JavaScript.

Q4: Por que meus estilos WebVTT não estão sendo aplicados?

R: Verifique se os blocos STYLE aparecem antes do primeiro cue, não contêm linhas em branco e utilizam corretamente o pseudo‑elemento ::cue. Também confirme a compatibilidade do navegador.

Q5: Arquivos WebVTT funcionam com protocolos de streaming como HLS?

R: Sim, o HLS (HTTP Live Streaming) suporta WebVTT segmentado para transmissão eficiente de legendas junto ao conteúdo de vídeo.

Referências

• WebVTT: O Formato de Web Video Text Tracks