Adicione legendas a um vídeo do seu site com WebVTT

A configuração básica

Baixe o VTT do CueSprint e coloque-o ao lado do vídeo no servidor. Depois adicione um elemento <track> dentro do <video>:

<video controls width="640">
  <source src="/media/demo.mp4" type="video/mp4">
  <track kind="captions" src="/media/demo.pt.vtt" srclang="pt" label="Português" default>
</video>

• kind="captions" indica ao navegador que são legendas do diálogo.
• srclang e label dão nome ao idioma no menu de legendas do player.
• default ativa a faixa quando o vídeo carrega.

O que costuma dar errado

• A faixa não carrega: o VTT deve ser servido do mesmo site que a página, ou de um servidor que permita requisições de outra origem. Sirva-o com o tipo de conteúdo text/vtt se puder.
• Caracteres estranhos: mantenha o arquivo em UTF-8, como o CueSprint exporta.
• Não aparecem em vídeos de fundo que tocam sozinhos e sem som: esses vídeos geralmente não têm controles; adicione default à faixa, ou grave as legendas com o CueSprint.

Vários idiomas

Adicione um <track> por idioma. O espectador escolhe no menu de legendas do player:

<track kind="captions" src="/media/demo.pt.vtt" srclang="pt" label="Português" default>
<track kind="captions" src="/media/demo.en.vtt" srclang="en" label="English">

Para criar o segundo arquivo, traduza as linhas de texto do VTT e deixe todas as linhas de tempo intactas.

Estilize as legendas

Os navegadores permitem estilizar legendas WebVTT com o seletor ::cue:

video::cue {
  font-family: system-ui, sans-serif;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
}

O VTT do CueSprint tem uma marcação de tempo antes de cada palavra. Navegadores compatíveis com as pseudoclasses :past e :future podem usá-las para um efeito karaokê, esmaecendo as palavras que ainda não foram ditas:

video::cue(:future) {
  color: rgba(255, 255, 255, 0.5);
}

O suporte a essas pseudoclasses varia entre navegadores; onde não existe, a legenda aparece como texto normal. Para um destaque idêntico em todo lugar, exporte o MP4 com as legendas gravadas.

Acessibilidade e SEO

Legendas tornam seu vídeo acessível para pessoas surdas ou com perda auditiva e para quem assiste sem som. A mesma transcrição, publicada como texto abaixo do vídeo, também dá aos buscadores palavras para indexar; veja nosso guia para transformar legendas em conteúdo.