Adicionar legendas a um vídeo na Web traz diversos benefícios para o usuário. Além de questões de acessibilidade, especialmente para pessoas surdas ou de baixa audição, o uso de legendas na Web possibilita que você compreenda um vídeo mesmo quando não tenha à disposição um fone de ouvido ou caixas de som.

Quantas vezes você não habilitou o áudio de um vídeo que passa no YouTube ou no seu feed do Facebook porque não está em um lugar apropriado? Se o vídeo tem legendas, sua experiência em assistir sem áudio acaba não sendo prejudicada.

A tarefa de adicionar legendas a um vídeo em HTML5 necessita de pelo menos três etapas: transformar o áudio em texto, minutar a legenda e implementá-la no vídeo.

As duas primeiras etapas são relativamente fáceis. Podem ser feitas de forma manual, transcrevendo ou usando ferramentas para transformar o áudio em texto e fazer a minutagem de forma automática. Por isso quero tomar mais espaço deste artigo falando da implementação das legendas em HTML5 e como customizá-las um pouco.

Atualmente, a forma mais simples e com maior compatibilidade nos navegadores é o uso do formato WebVTT, um formato em texto simples chamado pelo elemento <track> dentro da tag de <video>. O Jaydson Gomes da BrazilJS escreveu um belo artigo sobre como implementar legendas usando WebVTT no Blog da BrazilJS.

O uso das legendas em WebVTT (que são claramente derivadas dos formatos SRT, muito comuns para legenda de filmes baixados da Internet) possibilita algumas manipulações, como o uso de elementos para deixar o texto em negrito<b>, itálico <i> e sublinhado<u>.

00:00:00.000 –> 00:00:05.000 line:0%
Olá <i>pessoal</i>, eu <u>sou</u> o <b>Reinaldo Ferraz do W3C Brasil </b>

Além disso, é possível configurar a posição de cada bloco da legenda na tela utilizando o parâmetro line logo depois da minutagem. Valor 100% significa que o texto ficará no rodapé, e 0% leva o texto ao topo da página. Na página da documentação do W3C, você encontra outros recursos e exemplos para manipular a posição das legendas no vídeo.

Podemos ainda fazer algumas customizações com CSS. Alguns navegadores dão suporte para customização dos textos dentro dos arquivos .vtt utilizando os pseudoelementos ::cue, ::cue() e ::cue-region.

video::cue{ color: pink;  }

Aplicando esse CSS na página, o navegador vai mudar a cor do texto dentro da legenda de branco (definido por padrão) para rosa. Se quiser mudar apenas uma parte do texto, utilize ::cue(b), por exemplo, para mudar a cor de todos os textos envoltos no elemento <b>.

Existe ainda uma documentação para legendas na Web, que é o TTML (Timed Text Markup Language). Essa especificação (que tem status de W3C Reccomendation desde setembro de 2013) define um formato de legenda baseado em XML com muito mais poder de manipulação. Além de alterar a formatação visual, é possível fazer marcação semântica dentro de cada linha da legenda. Pode ser um pouco mais complicado, mas isso coloca muito mais significado em um texto que faz parte importante de um vídeo na Web.

Apesar de a implementação nos navegadores ser baixa (mas que pode ser contornada com bibliotecas e frameworks como o http://popcornjs.org/), o padrão TTML está sendo amplamente discutido e implementado por diversos setores envolvidos com transmissão broadcast, dentre eles a EBU (European Broadcast Union) e a ARIB (Association of Radio Industries and Businesses). Essa visão favorável do uso de TTML no mercado de transmissão de conteúdo online resultou em um Prêmio Emmy para o W3C, reconhecendo seu trabalho na padronização de legendas para conteúdo audiovisual.

Em uma época em que grande parte do conteúdo que circula pela rede está em formato de vídeo, é fundamental garantir que qualquer pessoa que não esteja apta a ouvir um áudio, seja por deficiência auditiva ou por falta de recursos técnicos, possa compreender um vídeo na Web.

De preferência fazendo isso utilizando legendas de padrões abertos.

***

Artigo publicado originalmente na Revista iMasters #19