Adicionar legendas sincronizadas com track e WebVTT

Legendas sincronizadas apresentam texto nos momentos correspondentes às falas e, quando necessário, aos sons relevantes do vídeo. Antes de escrever a faixa, decida quais informações ela precisa comunicar.

O atributo kind declara a finalidade da faixa:

• kind="subtitles": legendas das falas, geralmente traduzidas para quem não compreende o idioma do áudio.
• kind="captions": legendas que comunicam falas, identificam falantes quando necessário e descrevem sons relevantes para compreender o conteúdo sonoro sem ouvir.

A diferença está na informação oferecida, não apenas no idioma da legenda.

O WebVTT é um arquivo de texto simples, salvo com extensão .vtt e codificação UTF-8.

Ele começa com o cabeçalho WEBVTT, em letras maiúsculas. Depois vêm as entradas de legenda: cada uma contém uma linha com os tempos de início e fim, seguida pelo texto.

Vamos usar o formato horas:minutos:segundos.milissegundos, como em 00:00:03.500.

Os dois-pontos separam horas, minutos e segundos. Antes dos milissegundos, use ponto, não vírgula, e escreva três dígitos: .500 representa 500 milissegundos.

Entre as duas marcas, escreva -->: dois hífens seguidos do sinal de maior, com um espaço antes e outro depois. No exemplo, o início é 00:00:01.000 e o fim é 00:00:03.500.

Os tempos indicam posições na reprodução, sempre contadas a partir do início do vídeo — não da legenda anterior.

Em cada entrada, o fim precisa ser posterior ao início. Organize as entradas pelo tempo inicial e ajuste os intervalos às falas e aos sons correspondentes, evitando atrasos e sobreposições involuntárias.

Esta legenda entra aos 6 segundos e sai aos 8,5 segundos do vídeo. Portanto, fica visível por 2,5 segundos.

Divida falas longas em trechos que façam sentido, aproveitando pausas e limites de frases. Leia cada trecho considerando seu tempo de exibição: texto demais em um intervalo curto dificulta a leitura. Reorganize a divisão sem deslocar as legendas para momentos que não correspondam à fala.

Ana e Bruno falam sem aparecer na imagem. Os tempos abaixo são contados desde o início do vídeo:

• De 1 s a 4 s — Ana: “Confira o endereço.”
• De 4 s a 7 s — Ana: “Depois, toque a campainha.”
• De 7 s a 9 s — a campainha toca, anunciando a chegada.
• De 9 s a 12 s — Bruno: “Já vou abrir!”

Fora desses intervalos, há silêncio. Você tem todas as informações necessárias; não precisa de um vídeo para realizar esta atividade.

Insira <track> dentro de <video>, depois dos elementos <source>, quando houver. Ele é um elemento vazio: não recebe conteúdo nem uma tag </track>. As legendas ficam no arquivo .vtt.

Neste exemplo de marcação, o vídeo tem áudio em inglês e a faixa contém a tradução das falas para português:

• src: caminho do arquivo WebVTT, não do vídeo.
• kind: finalidade da faixa; aqui, subtitles para a tradução das falas.
• srclang: código do idioma do texto da faixa, não necessariamente do áudio ou da página. É obrigatório para subtitles.
• label: nome compreensível apresentado na seleção de faixas. Em vez de apenas um código como pt-BR, pode informar “Português (Brasil) — tradução”.

Considere uma cena fictícia com áudio em inglês: uma campainha toca e Lia avisa que alguém está na porta.

A faixa abaixo foi escrita em português do Brasil para comunicar tanto a fala quanto o som relevante. Considere que ela será salva como cena-pt.vtt, na subpasta legendas, ao lado de index.html.

Observe o conteúdo: ele orienta a escolha de kind, srclang e label.

Complete os quatro valores de <track> no documento abaixo. A faixa está em legendas/cena-pt.vtt e contém a fala de Lia e a campainha em português do Brasil, embora o áudio seja em inglês.

Use o rótulo “Português (Brasil) — falas e sons”. Esta é uma revisão de código: não é necessário ter ou reproduzir o vídeo.

Adicionar default a um track indica a faixa preferencial quando as preferências do usuário não determinam outra seleção.

Isso não obriga as legendas a ficarem ligadas: o usuário pode selecionar outra faixa ou desativá-las.

default é booleano: sua presença já indica a preferência. Escrever default="false" não desativa essa indicação.

Para indicar preferência, escreva apenas default, como abaixo. Para retirar a indicação, remova o atributo inteiro.

Escrever e revisar o HTML e o WebVTT é a prática principal deste tutorial e pode ser concluída no seu editor, sem servidor.

A revisão confere o conteúdo dos arquivos. Já o teste de reprodução verifica se a faixa realmente carrega e se as legendas acompanham os acontecimentos do vídeo.

Para testar o carregamento da faixa, a página, o vídeo e o WebVTT precisam estar disponíveis por HTTP ou HTTPS. Isso depende de um ambiente que já sirva esses arquivos no seu computador ou nas ferramentas que você usa.

Trocar apenas file:// por http:// na barra de endereço não disponibiliza os arquivos.

Antes desse teste, adapte as falas, os sons relevantes e os intervalos do WebVTT ao conteúdo real de um vídeo seu.

Depois, acesse a página servida, selecione a faixa nos controles nativos e reproduza o trecho. O resultado esperado é que cada legenda apareça e desapareça nos momentos correspondentes à fala ou ao som, com tempo suficiente para leitura.

Crie uma faixa em português do Brasil para a cena descrita abaixo. No seu editor, salve a base HTML como index.html; o arquivo legendas-pt-BR.vtt ficará na mesma pasta.

A cena é fictícia: cena.mp4 é apenas um nome de referência. Você não precisa possuir esse vídeo nem configurar um servidor para concluir a escrita e a revisão.

Acrescente a esta página o elemento track que você vai escrever.

Compare sua solução com o exemplo e corrija o que for necessário:

• Estrutura: arquivo .vtt em UTF-8, WEBVTT no início e linhas em branco após o cabeçalho e entre as entradas.
• Tempos: ponto antes dos milissegundos, espaços ao redor de -->, fim posterior ao início e entradas ordenadas, sem sobreposição nesta cena.
• Conteúdo: falas completas e legíveis, Ana e Bruno identificados e campainha descrita no intervalo correspondente.
• Associação: track dentro de video, após source, sem </track>; src corresponde exatamente ao arquivo criado.
• Identificação: kind="captions", srclang="pt-BR" e um label compreensível.
• Preferência: no máximo um default no vídeo. Para não indicar preferência, remova o atributo; não use default="false".

Se você já dispõe de um ambiente HTTP ou HTTPS no seu computador ou nas suas ferramentas, use um vídeo próprio compatível com o navegador. Ajuste o source ao nome e ao tipo desse arquivo e adapte falas, sons e tempos do WebVTT ao conteúdo real.

Com a página e os arquivos servidos nesse ambiente, selecione a faixa nos controles nativos e observe se cada entrada aparece e desaparece nos momentos esperados. Se houver atraso ou sobreposição, ajuste e confira novamente.

Sem esse ambiente, conclua pela revisão textual. Abrir por file:// pode impedir o carregamento da faixa; isso não comprova um erro no WebVTT.