Legenda em vídeos HTML5

fev 24, 2016

A Open Web é incrível. Até bem pouco tempo atrás nem imaginávamos o quanto seria possível ser feito com o HTML no futuro e até onde a linguagem evoluiria. Pois bem, este futuro chegou e as possibilidades com HTML5, além de incríveis, são praticamente infinitas.

Vídeos

O conteúdo da Web já não é só texto há muito tempo. Os vídeos fazem parte do nosso dia a dia de navegação na Internet. Só no YouTube, mais de 4 bilhões de vídeos são assistidos diariamente, totalizando mais de 6 bilhões de horas assistidas. É muita coisa! Deste janeiro de 2015 o Youtube carrega por padrão vídeos em HTML5, deixando o Flash virar história. A tag <vídeo> é suportada por quase 100% dos browsers, com exceção do IE8 e do Opera Mini. Olhando para esse cenário, podemos afirmar que mais uma vez a Open Web "venceu", e que hoje temos tecnologia aberta para criar sites/aplicações cada vez mais poderosas.

WebVTT

Esta pequena introdução foi para contextualizar o conteúdo deste artigo, que tem como objetivo apresentar um estudo de caso de vídeo com legenda, desenvolvido para o teaser da BrazilJS Conf 2016.

Atualmente, é possível criar legendas para um vídeo na Web utilizando o formato WebVTT, padronizado pela W3C. O WebVTT é um formato para exibição de faixas de texto cronometradas, como por exemplo, legendas. Isso é possível com a utlização do elemento HTML <track>. O formato WebVTT é um simples arquivo de texto que deve ser sempre codificado em UTF-8. A estrutura básica de um arquivo WebVTT é a seguinte: `\text WEBVTT

1 00:00:00.000 --> 00:00:02.300 Olá, o meu nome é MPJ.

2 00:00:02.550 --> 00:00:04.550 Meu nome completo é Mattias Petter Johansson.

3 00:00:05.250 --> 00:00:12.050 Mas vamos ser sinceros, você tem tanta chance de pronunciar isso corretamente do que eu pronunciar "refeição" em português.

4 00:00:12.050 --> 00:00:13.800 Efeiciauuuu (Ele tentou falar "refeição")

5 00:00:13.850 --> 00:00:21.050 Eu moro na Suécia, um país que é basicamente o oposto do Brasil: É pequeno, frio e introvertido. `\

A especificação WebVTT é bem extensa, possibilitando uma série de configurações para exibição de textos em vídeos. Usualmente, este tipo de arquivo não será desenvolvido por mãos humanas, mas sim por algum programa de computador que saiba gerar esse formato. Para saber mais sobre a especificação, consulte a documentação oficial da W3C ou da Mozilla.

Estudo de caso BrazilJS

Para o nosso teaser da BrazilJS Conf 2016 queríamos algo mais interativo, e achamos que colocar um vídeo do palestrante traria uma experiência muito mais rica do que o velho avatar. Com o vídeo em mãos, começamos a pensar em como colocá-lo da maneira mais funcional possível, tendo em mente que o mesmo deveria ser bem compreendido por toda nossa audiência, incluindo outros países.

O primeiro passo foi converter o vídeo para os formatos WebM e MP4, que são os formatos que funcionam em praticamente todos os browsers modernos. Para converter vídeos facilmente, utilizamos o FFMPEG, uma solução multi-plataforma para conversão de vídeos. Alguns exemplos de conversão (veja esse Gist para mais exemplos): `\text

webm

ffmpeg -i IN -f webm -vcodec libvpx -acodec libvorbis -ab 128000 -crf 22 -s 640x360 OUT.webm

mp4

ffmpeg -i IN -acodec aac -strict experimental -ac 2 -ab 128k -vcodec libx264 -vpre slow -f mp4 -crf 22 -s 640x360 OUT.mp4 Com os vídeos prontos e nos formatos corretos, chega a parte mais simples, coloca-los na página. A tag de vídeo do HTML5 evolui ao ponto de ser tão simples quanto colocar uma imagem no nosso documento:html

`\ Pronto. Apenas com essa marcação conseguimos tornar o site muito mais dinâmico, com um vídeo do nosso palestrante.

Mas vamos voltar ao WebVTT um pouco. Como mencionei antes, a experiência de vídeo que precisamos proporcionar deve ser global. Para isso, é preciso adicionar legendas em nosso vídeo. Confesso que no início achei que seria muito trabalhoso, e que teria que usar alguma biblioteca ou framework. Felizmente, fui positivamente surpreendido. Veja como é simples adicionar uma legenda em um vídeo HTML5: `\html

`\ A tag <track> é uma tag filha de elementos de mídia, como a tag video. É com essa tag que conseguimos adicionar faixas de texto cronometradas em nossos vídeos. Você pode especificar quantos <track>s forem necessários dentro do seu vídeo, fazendo com que essas sejam as suas opções de legenda.

Note que especificamos como arquivo WebVTT o arquivo mattias.vtt. Para fazer este arquivo, utilizei um programa de criação de legendas, o Gnome Subtitles, porém, este programa não gera arquivos WebVTT. A solução foi gerar um arquivo .srt e converte-lo para WebVTT utilizando a ferramenta online Simple SubRip to WebVTT converter.

Resultado

Você pode ver o resultado final no site da BrazilJS Conf. Abaixo segue o vídeo com legenda, exatamente como fizemos no teaser.

Conclusão

Vimos neste artigo o poder e maturidade do HTML5. Criar soluções de vídeo para Web, de forma aberta, é algo fantástico. Adicionar um vídeo em nossas páginas é uma tarefa tão trivial quanto adicionar uma imagem. Com o formato WebVTT é possível adicionar legendas de forma simples em nossos vídeos HTML5.