Como adicionar uma faixa VTT a um vídeo HTML5

Antes de alterar o texto, distinga uma faixa que não carrega de uma legenda que surge na altura errada.

Ligar a faixa

Aloje o vídeo e o VTT em UTF-8 no mesmo sítio. Insira track dentro de video. O caminho é relativo à página. Em srclang indique a língua das legendas, mesmo que a gravação esteja noutra língua.

<video controls src="lesson.mp4">
  <track kind="subtitles" src="example-en.vtt"
         srclang="en" label="English" default>
</video>

Teste uma única faixa num servidor

Descarregue o vídeo de demonstração e a legenda. Coloque-os junto da página HTML num servidor de teste com os nomes lesson.mp4 e example-en.vtt. Abra o endereço web para evitar as restrições que o navegador aplica aos ficheiros locais.

O exemplo contém apenas o anúncio da sessão. Aos 8 segundos, confirme a frase no ecrã. Aos 13 já deve ter desaparecido. Se continuar visível depois de desligar as legendas, procure outra faixa ativa ou texto gravado na imagem.

Siga o pedido quando faltar a faixa

Abra o separador Rede, atualize a página e escolha inglês. Se não existir um pedido .vtt, inspecione o elemento video publicado: o editor pode ter removido track ao guardar. Se existir, compare o endereço completo com a pasta de carregamento.

Leia a resposta mesmo que tenha o estado 200. Deve começar com WEBVTT, uma linha vazia e os tempos. Uma página de autenticação devolve HTML. Se houver um erro de origem cruzada, teste o ficheiro na origem da página e verifique a origem permitida e o atributo crossorigin.

Localize o corte a partir do desfasamento

Compare três frases fáceis de reconhecer com os tempos das legendas. Um desvio constante sugere um genérico alterado. Se apenas a terceira frase falhar, procure um corte após a segunda. Se a diferença aumentar, confirme primeiro qual a montagem que o leitor está a reproduzir.

Na página publicada, selecione cada língua e depois desligue as legendas. Compare o texto que ficar no ecrã com a imagem original. Para comunicar um problema, indique o vídeo, a faixa e o instante exato.

Exemplo do processo

Voz sintética inglesa e guião original da EasySub. O exemplo adapta a terceira legenda do SRT original; não é uma nova exportação nem uma revisão humana profissional.

WEBVTT

3
00:00:07.950 --> 00:00:12.149
Our next workshop starts on June 15 at 9:30.

WebVTT · EN · Descarregar o vídeo de demonstração · SRT original (inglês)

Testar um excerto

Escolha English e avance para o segundo oito; no segundo treze a frase já não deve estar visível. Abra o endereço do ficheiro: uma página de autenticação com estado 200 não é um VTT. Confira text/vtt e, noutro domínio, a configuração de crossorigin e CORS.