Page 62 - Locaweb - Edição 33

lwprogramação
62 locaweb
Conheça oWebVTT
quem é o locutor (voice) por meio da
demarcação <v>, acompanhado do
nome da voz atual. Essa informação
será exibida juntamente ao texto e
permite um gancho para a estilização
do conteúdo (por exemplo, uma cor
para a fala de cada personagem; esse
item será melhor explicado a seguir).
Outro recurso muito interessante
que o WebVTT permite é a exibição
de legenda no estilo de videokê.
Quando estamos em um karaokê,
a legenda transcorrida da música
é realçada para destacar o que já
passou na linha de tempo. Para isso,
devemos embutir dentro do conteúdo
uma maneira de sinalizar subetapas
na exibição de um conteúdo:
1
00:00:01.000 --> 00:00:12.400
A esperança equilibrista
<00:00:03.000> sabe que o show
de todo artista <00:00:07.000>
tem que continuar
Esse recurso fica mais poderoso
ainda quando combinamos com a
estilização do efeito. Sim, é possível
trabalharmos com folhas de estilo
(CSS) em cima de WebVTT. A
maneira de trabalhar com CSS para
legendas demarcadas por tempo,
como o exemplo dado, ocorre por
dois pseudosseletores (:past e :future)
atrelados ao principal pseudoelemento
do track, o ::cue. Para aplicarmos estilo
ao texto que passou e ao que está por
vir, podemos fazer como no exemplo:
::cue:past {
color: red;
}
::cue:future {
text-shadow: black 0 0 3px;
}
Outra possibilidade de estilização
do texto do track é por meio de
classes atreladas ao pseudosseletor
::cue, como será mostrado a seguir:
1
00:00:01.000 --> 00:00:05.500
Embora tudo tenha sido
<c.destaque>cansativo</c>,
obtivemos sucesso.
E no CSS:
::cue .destaque{
color: #FF000;
text-transform: uppercase;
font-weight: bolder;
}
Outra possibilidade que se tem
para estilizar o conteúdo é aplicar
elementos de formatação diretamente
em seu conteúdo, como as tags <b>,
<u> e <i>.
1
00:00:01.000 --> 00:00:05.500
Embora <b>tudo</b> tenha sido
<u>cansativo</u>, obtivemos
<i>sucesso</i>.
Por fim, a demarcação de
capítulos se faz de maneira
semelhante à das legendas:
WEBVTT
cap-1
00:00:00.000 --> 00:00:20.000
Introdução
cap-2
00:00:20.001 --> 00:01:00.000
Decorrer dos fatos
Um recurso que
chama a atenção
no WebVTT é
a exibição de
legenda no estilo
de videokê, com
linha do tempo
Site do Universal
Subtitles, que
facilita muito a
exportação de
legendas, tornando
o processo simples
Página com especificação do CSS: folhas de
estilo podem trabalhar com o WebVTT