Guia Detalhado de Sintaxe de Legendas WebVTT: Guia de Desenvolvimento e Depuração de Carimbos de Tempo a Estilização

A primeira linha de um arquivo WebVTT padrão deve ser a declaração WEBVTT. A declaração pode ser seguida por um espaço e texto de descrição do arquivo, e diferentes blocos estruturais são separados por linhas em branco. A maioria dos players HTML5 não consegue analisar corretamente arquivos que não incluem o cabeçalho WEBVTT.

Blocos de comentário NOTE são usados para adicionar anotações de desenvolvimento ou descrições de legendas, e suportam conteúdo de linha única ou multilinha. Eles não são renderizados nem exibidos pelos players. Durante o desenvolvimento e depuração, os blocos NOTE podem ser usados para marcar parágrafos de legendas que precisam de modificação, sem afetar o resultado final de reprodução.

Cada cue de legenda é composto por um carimbo de tempo e texto de exibição. O formato de carimbo de tempo suporta dois estilos de separador de milissegundos: o ponto e a vírgula. A maioria dos navegadores modernos só suporta a notação de ponto.

O campo de hora nos carimbos de tempo é opcional. Legendas com duração total inferior a uma hora podem omitir o campo de hora, resultando no formato MM:SS.sss. O formato completo é HH:MM:SS.sss. O horário de início e o horário de fim são separados pelo símbolo -->.

WebVTT suporta seis tags inline padrão para modificar o estilo de exibição de texto parcial. Dentre elas, b, i e u correspondem a negrito, itálico e sublinhado, respectivamente, seguindo as mesmas regras das tags HTML correspondentes. Os desenvolvedores podem usá-las diretamente na escrita manual.

A tag ruby é usada para anotação de pinyin, a tag lang é usada para marcar texto em diferentes idiomas, e a tag voice é usada para rotular o falante. Estas tags são usadas principalmente para classificação de metadados, e os players podem implementar renderização diferenciada com base nelas.

O pseudo-elemento ::cue é um pseudo-elemento CSS dedicado fornecido para legendas WebVTT. Os desenvolvedores podem usar este pseudo-elemento para modificar o estilo padrão de todas as legendas em uma página web, e ele suporta propriedades CSS comuns como cor, fonte e fundo.

Blocos STYLE são usados para definir estilos globais ou específicos de cue dentro do arquivo WebVTT. Blocos REGION são usados para definir regiões de renderização de legendas, e suportam a exibição de diferentes legendas em várias regiões simultaneamente, o que é comumente usado para exibição lado a lado de legendas multilíngues.

O elemento track de HTML5 é usado para importar arquivos de legenda WebVTT externos. O atributo kind do elemento track define o tipo de legenda, que tem cinco valores possíveis: subtitles, captions, descriptions, chapters, metadata.

Dentre eles, subtitles correspondem a legendas traduzidas gerais, captions correspondem a legendas para usuários com deficiência auditiva que incluem anotações de som ambiental, chapters correspondem a navegação por capítulos, e metadata armazena metadados da página e não é exibido. Diferentes players tratam o atributo kind com comportamento diferenciado.