Publicado em 20 de agosto de 2020
As legendas e as descrições para leitores de tela são a única maneira de muitos usuários acessarem seus vídeos. Em algumas jurisdições, elas são até mesmo exigidas por lei ou regulamento. O formato WebVTT (trilhas de texto de vídeo da Web) é usado para descrever dados de texto com tempo, como legendas ou closed captions, para tornar seus vídeos mais acessíveis.
Adicionar tags <track>
Para adicionar legendas ou descrições para leitores de tela a um vídeo da Web, adicione uma tag <track>
dentro de uma tag <video>
. Além das legendas e descrições para leitores de tela, as tags <track>
também podem ser usadas para títulos de capítulos e legendas.
A tag <track>
é semelhante ao elemento <source>
, porque ambos têm um src
.
que aponta para o conteúdo referenciado. Para uma tag <track>
, ela aponta para um
arquivo WebVTT.
O atributo label
especifica como uma faixa específica pode ser
identificada na interface.
Para fornecer faixas em vários idiomas, adicione uma tag <track>
separada para cada
arquivo WebVTT que você está fornecendo e indique o idioma usando o atributo
srclang
.
Veja este exemplo de tag <video>
com duas tags <track>
.
Adicione um elemento <track>
como filho do elemento <video>
.
<video controls>
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
<track src="chrome-subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default>
<track src="chrome-subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="zh">
<p>This browser does not support the video element.</p>
</video>
Também há um exemplo que você pode acessar no Glitch (link em inglês).
Estrutura do arquivo WebVTT
Confira um arquivo WebVTT hipotético para a demonstração. É um arquivo de texto que contém uma série de dicas. Cada sinal é um bloco de texto a ser exibido na tela e o período de exibição.
WEBVTT
00:00.000 --> 00:04.999
Man sitting on a tree branch, using a laptop.
00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.
...
Cada item no arquivo de faixa é uma sequência. Cada sinal tem um horário de início e
horário de término, separados por uma seta, seguido pelo texto do sinal. As dicas também podem ter
IDs, como railroad
e manuscript
. Os sinais são separados por uma linha vazia.
WEBVTT
railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth
manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.
Os tempos de sinalização estão no formato hours:minutes:seconds.milliseconds
. A análise é rígida.
Isso significa que os números precisam ser preenchidos com zeros, se necessário: horas, minutos e segundos
precisam ter dois dígitos (00 para um valor zero) e milissegundos precisam ter três
dígitos (000 para um valor zero). Existe um excelente validador WebVTT em
Live WebVTT Validator, que verifica erros na formatação dos horários, e
problemas como tempos não sequenciais.
Como há muitos serviços disponíveis, é possível criar um arquivo VTT manualmente criar para você.
Como você pode ver em nossos exemplos anteriores, o formato WebVTT é bem simples. Basta adicionar seus dados de texto com o tempo.
Mas e se você quiser que suas legendas sejam renderizadas em uma posição diferente com o
alinhamento à esquerda ou à direita? Talvez para alinhar as legendas com o apresentador atual.
ou para ficar longe do texto na câmera. O WebVTT define configurações para fazer isso
e muito mais diretamente no
arquivo .vtt
. Observe como o posicionamento da legenda é definido adicionando
configurações após as definições de intervalo de tempo.
WEBVTT
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
The first line of the subtitles.
Outro recurso útil é a capacidade de estilizar dicas usando CSS. Talvez você queira
usar um gradiente linear cinza como plano de fundo, com uma cor de primeiro plano de
papayawhip
para todas as legendas e todo o texto em negrito colorido peachpuff
.
video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
video::cue(b) {
color: peachpuff;
}
Se quiser saber mais sobre estilo e marcação de nomes a especificação WebVTT é uma boa fonte de exemplos avançados.
Tipos de faixas de texto
Você notou o atributo kind
do elemento <track>
? Ele é usado para
indicar a relação entre a faixa de texto e o vídeo. O
valores possíveis do atributo kind
são:
captions
: para legendas descritivas de transcrições e possivelmente traduções de qualquer áudio. Adequado para pessoas com deficiência auditiva e nos casos em que o vídeo é tocando sem som.subtitles
: para legendas, ou seja, traduções de fala e texto em um idioma diferente do principal do vídeo.descriptions
: para descrições de partes visuais do conteúdo do vídeo. Adequado para pessoas com deficiência visual.chapters
: é exibido quando o usuário está navegando no vídeo.metadata
: não visível e pode ser usado por scripts.
Agora que você conhece os fundamentos de como disponibilizar um vídeo e torná-lo acessível na sua página da Web, talvez você se pergunte sobre casos de uso mais complexos. Saiba mais sobre Frameworks de mídia e como eles podem ajudar você a adicionar vídeos em sua página da web, além de fornecer recursos avançados.