Gerar elemento track do HTML
Ou cole o texto da legenda
Opções
Legendas (subtitles) são para espectadores que ouvem o áudio e precisam das palavras — uma tradução, ou o mesmo idioma escrito. Captions são para espectadores que não ouvem, então também carregam o que o som diz a todos os outros: música, uma porta, um telefone tocando. O mesmo arquivo pode servir a qualquer um dos dois propósitos, e é por isso que a página pergunta em vez de adivinhar, e o valor não pode ser alterado depois de dentro do elemento. Descrições, capítulos e metadados não são oferecidos: nenhum deles pode ser preenchido com o conteúdo de um arquivo de legenda.
Uma etiqueta curta de idioma como en, en-GB ou pt-BR, nomeando o idioma das palavras nas legendas, não o idioma do vídeo. Uma faixa que se declara legendas é obrigada a nomear um idioma, então esvaziar esta caixa volta para en em vez de remover o atributo — e, como todo atributo é impresso no resultado, você vê o valor de reserva antes de colar qualquer coisa.
Texto livre: Português, Português (SDH), Français. É a linha que um espectador escolhe quando uma página oferece mais de uma faixa, então escreva como seu público reconheceria. Esvaziar a caixa remove o atributo por completo em vez de gravar um vazio, o que devolve a nomeação ao reprodutor; uma etiqueta vazia colocaria uma linha sem nome nesse menu.
Ativado, as legendas aparecem assim que o vídeo toca. Um elemento de mídia só pode ter uma faixa padrão, então deixe desativado quando a página já tiver uma: uma segunda faixa que se declara padrão faz os reprodutores escolherem a errada, enquanto não ser a padrão só significa que o espectador a ativa sozinho.
A taxa de quadros em que os tempos são contados. Nas páginas de formato é o que o MicroDVD precisa, porque ele guarda os tempos como números de quadro. Nas páginas de taxa de quadros é a taxa com que o arquivo foi cronometrado — a versão para a qual as legendas foram feitas — e a segunda caixa da página recebe a taxa do vídeo com que você vai usá-las. 23,976, 24, 25, 29,97, 30, 50, 59,94 e 60 são as comuns. Errar isso desloca toda a linha do tempo e, nas páginas de taxa de quadros, desloca por uma proporção em vez de por uma quantidade fixa.
Esta página coloca suas legendas dentro de um único elemento HTML que você pode colar em uma página. O que sai é uma linha <track> com o WebVTT embutido no atributo src, então o texto das legendas viaja junto com a própria marcação — não há um segundo arquivo para subir, nenhum caminho para acertar e nenhuma forma de um player acabar procurando algo que não está lá.
Esse embutimento é o ponto inteiro da página, e a razão é o jeito como os navegadores tratam arquivos locais. Uma faixa é buscada, não desenhada, e o navegador recusa essa busca quando a própria página foi aberta a partir do disco, então um <track src="film.vtt"> em uma página que você salvou na área de trabalho não mostra nada: nenhum erro na tela, um menu de legendas vazio e uma linha no console que quase ninguém abre. Um data: URI nunca é buscado — o texto está ali no atributo —, então funciona nesse caso. O custo é o tamanho, já que cada espaço e cada quebra de linha do WebVTT viram três caracteres, e esse custo vale a pena aqui: o elemento existe para funcionar sozinho.
Os atributos vêm das caixas do painel, porque nenhum deles pode ser lido do seu arquivo. kind é o que mais importa: subtitles é uma tradução para quem não acompanha o áudio, e captions é a versão mais completa, que também carrega música e efeitos sonoros para quem não ouve. Um arquivo cheio de [porta batendo] e notas musicais pode ser qualquer um dos dois, e só você sabe para que público ele foi feito — por isso a página pergunta em vez de adivinhar. Os outros três são o idioma do texto, o nome mostrado no menu de legendas do player e se a faixa deve abrir sozinha.
Duas dessas caixas se comportam de forma diferente quando você as esvazia, e a diferença vale conhecer. Limpar o nome do menu remove o atributo por completo, porque um rótulo é opcional e deixá-lo de fora simplesmente entrega a escolha ao player. Limpar a caixa de idioma não faz isso: uma faixa que se declara como subtitles precisa nomear um idioma, então uma caixa vazia cai para en em vez de produzir um elemento sem algo que ele é obrigado a ter. Nenhuma das duas é substituição silenciosa — a saída imprime todos os atributos, então você vê o que as suas caixas produziram.
O texto das legendas dentro do elemento é escrito pelo mesmo escritor WebVTT que as páginas de conversão usam, o que significa que um arquivo que chegou como WebVTT mantém tudo o que carregava fora dos blocos: o texto da linha WEBVTT, blocos de comentário e de estilo e as configurações por bloco que decidem onde uma linha fica na tela. Nada no seu arquivo é alterado, e nada é enviado; as palavras, os tempos e o estilo saem no estado em que chegaram.
Exemplos
Um arquivo SRT, com as caixas padrão
Entrada
1
00:00:01,000 --> 00:00:03,000
The room is dark.
2
00:00:04,000 --> 00:00:06,000
Nobody came.
Saída
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en" label="English" default>
Uma linha de saída, e o arquivo inteiro dentro dela: %0A é uma quebra de linha e %20 é um espaço, então o WebVTT viaja no atributo src em vez de ficar em um arquivo ao lado da página. Os quatro atributos são as quatro caixas — o idioma do texto, a linha que o espectador escolhe no menu de legendas do player e default, que é o que faz esta faixa abrir sozinha. A numeração de blocos do SRT é mantida como identificador de bloco.
Um arquivo WebVTT entra como o mesmo WebVTT
Entrada
WEBVTT - exported from the editing room
NOTE The first pass was done by hand.
STYLE
::cue { color: #f2f2f2; }
intro
00:00:01.000 --> 00:00:03.000 align:start position:10%
The room is dark.
2
00:00:04.000 --> 00:00:06.000
Nobody came.
Saída
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%20-%20exported%20from%20the%20editing%20room%0A%0ANOTE%20The%20first%20pass%20was%20done%20by%20hand.%0A%0ASTYLE%0A%3A%3Acue%20%7B%20color%3A%20%23f2f2f2%3B%20%7D%0A%0Aintro%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%20align%3Astart%20position%3A10%25%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en-GB" label="English (UK)" default>
Tudo o que um arquivo WebVTT guarda fora dos blocos sobrevive: o comentário na linha WEBVTT, o bloco NOTE, o bloco STYLE que decide como as legendas aparecem no player, a linha de nome do bloco e a configuração por bloco align:start position:10% (o %25 ali é um sinal de porcentagem, codificado porque um sinal de porcentagem cru não é permitido dentro de um URI). Um arquivo que entrou como WebVTT sai como esse mesmo WebVTT. As duas caixas dizem en-GB e English (UK), porque esta cópia foi feita para um público britânico — nada no arquivo dizia isso.
Legendas para quem não ouve
Entrada
1
00:00:01,000 --> 00:00:03,000
[door slams]
The room is dark.
2
00:00:04,000 --> 00:00:06,000
♪ Nobody came ♪
Saída
<track kind="captions" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0A%5Bdoor%20slams%5D%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0A%E2%99%AA%20Nobody%20came%20%E2%99%AA%0A" srclang="en" label="Tom & "the boss"" default>
O arquivo está cheio de efeitos sonoros e música, que é exatamente para o que serve kind="captions" — legendas para quem não ouve —, e a caixa é o único lugar onde isso pode ser dito. Separadamente, o nome do menu foi digitado como Tom & "the boss" e sai como Tom & "the boss": uma aspa não escapada fecharia o atributo ali mesmo e transformaria o resto do nome em atributos truncados no elemento.
Três caixas limpas ou desligadas
Entrada
1
00:00:01,000 --> 00:00:03,000
A cold night,
and no heating.
2
00:00:04,000 --> 00:00:06,000
Every night this week?
Saída
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AA%20cold%20night%2C%0Aand%20no%20heating.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0AEvery%20night%20this%20week%3F%0A" srclang="en">
Três caixas alteradas, três resultados diferentes, porque o HTML pede coisas diferentes. O nome do menu desaparece do elemento por completo — é opcional, e deixá-lo de fora entrega a decisão ao player. A caixa de idioma está vazia e ainda assim produz srclang="en": uma faixa que se declara como subtitles precisa nomear um idioma, então não existe faixa sem idioma, e o valor de reserva aparece na saída. O interruptor default está desligado e esse atributo também sumiu, então esta faixa não vai abrir sozinha, que é o sentido seguro quando uma página carrega mais de uma.
Perguntas frequentes
Ainda preciso de um .vtt separado quando gero o elemento track?
Não, e esse é o ponto da página. O WebVTT é escrito dentro do atributo src como um data: URI, então o elemento carrega as próprias legendas. Você pode colar em uma página, mandar o arquivo por e-mail ou movê-lo para outra pasta e as legendas continuam aparecendo. A única coisa a observar é que tudo é um atributo só: se você copiar apenas parte dessa linha comprida, quebrou o URI e a faixa fica vazia.
Isso funciona se eu abrir o arquivo HTML direto do meu computador com o elemento track embutido?
Sim, e é justamente esse caso que leva a página a embutir as legendas. Quando uma página é aberta a partir do disco, o navegador recusa buscar um arquivo de faixa separado, então uma faixa apontando para film.vtt não mostraria nada — nenhum erro visível, só um menu de legendas vazio. Um data: URI não é buscado, o texto já está no atributo, então funciona do mesmo jeito na sua área de trabalho e em um servidor.
Por que o elemento track gerado é muito maior que meu arquivo de legendas?
Porque cada caractere que não é letra nem dígito vira três em um URI — um espaço é %20 e uma quebra de linha é %0A. Um arquivo de cem kilobytes vira algumas centenas. Base64 seria mais curto, cerca de um terço acima do original em vez do dobro, mas o resultado seria uma parede de caracteres ilegíveis; como está, você pode olhar o atributo src e reconhecer o seu próprio diálogo dentro dele, o que vale o tamanho extra para um arquivo que você vai colar em uma página e manter à mão.
Por que o elemento track fica sem atributo label depois que eu limpei a caixa?
Porque um nome de menu é opcional em HTML, e deixá-lo de fora não quer dizer "sem nome" — quer dizer que o player decide o que mostrar no menu de legendas, o que normalmente é o idioma. Limpar a caixa portanto remove o atributo em vez de escrever um vazio, já que label="" apareceria como uma linha em branco naquele menu. Coloque um nome de volta quando quiser; é uma string simples e nada mais na página depende dela.
Qual é a diferença entre subtitles e captions no elemento track?
Para quem eles são. subtitles pressupõe que o espectador ouve o áudio e precisa das palavras traduzidas ou escritas; captions pressupõe que ele não ouve, então também carregam a informação que chega a quem ouve por meio do som — música, portas, um telefone tocando. Um arquivo pode servir aos dois propósitos, e o mesmo texto está nos dois, então a página não tem como saber qual você quer. Também não dá para mudar depois dentro do elemento, então escolha o que o seu público precisa.
Quais dos outros tipos de track ficaram de fora?
Três: descriptions, que narram a imagem para quem não vê; chapters, que é navegação e não legenda e tem página própria neste site; e metadata, que não é mostrado a ninguém. Nenhum dos três pode ser preenchido com o conteúdo de um arquivo de legendas, então oferecê-los só deixaria você montar um elemento que não exibe nada. Os dois oferecidos são os dois que um arquivo de legendas realmente consegue servir.
Alguma coisa nas minhas legendas muda ao gerar o elemento track?
O texto, os tempos e o estilo ficam inalterados, e um arquivo WebVTT mantém os próprios blocos de comentário, estilo e região além das configurações por bloco. O que muda é a forma: as linhas são reescritas na sintaxe WebVTT, que é o que os players leem, então a vírgula de 00:00:01,000 em um SRT vira ponto. Um byte é descartado de propósito — a marca inicial que diz que o arquivo é UTF-8, porque o data URI já declara a codificação e a marca apareceria como três caracteres perdidos no começo.