Acessibilidade
Vídeos mais acessíveis com HTML5 – parte II
Na primeira parte do artigo, vimos as principais características do DFXP, uma especificação do W3C para trabalhar com legendas em vídeos do HTML5. Agora iremos conhecer a estrutura de um arquivo DFXP e detalhar o conceito de regions. Estrutura básica …
Por Talita Pagani
Na primeira parte do artigo, vimos as principais características do DFXP, uma especificação do W3C para trabalhar com legendas em vídeos do HTML5. Agora iremos conhecer a estrutura de um arquivo DFXP e detalhar o conceito de regions.
Estrutura básica de um arquivo DFXP
Um arquivo DFXP é um arquivo baseado em XML que utiliza a linguagem Timed Text Markup Language (TTML). A TTML estabelece tags e propriedades específicas para atribuir uma informação textual a um intervalo de tempo, posicionar esta informação em uma determinada região do vídeo e formatar a apresentação desta informação. Um documento TTML começa com a tag
1 | tt |
e sua estrutura básica é composta por um cabeçalho e corpo de conteúdo. O cabeçalho apresenta informações como metadata, definições de estilo e layout, enquanto o corpo de conteúdo contém as especificações dos textos associados a tempo e referenciando estilos e informações de layout.
Estrutura básica de um document TTML.
Metadados
A seção de metadata pode conter informações como título do documento, descrição e informações de copyright. As tags que representam estes metadados são especificadas através do namespace
1 | ttm |
(timed text metadata).
Exemplo de documento TTML
The Authors (c) 2011
O endereço do namespace
1 | ttm |
definido na tag metadata assim como o namespace para estilos (
1 | tts |
), podem ser definidos logo na tag
1 | tt |
, deixando o código um pouco mais limpo e organizado.
...
Criando estilos para legendas
Infelizmente a TTML não trabalha em conjunto com linguagens para definição de estilos como o XSLT ou o próprio CSS, mas ela possui tags e propriedades para definir e aplicar informações de estilo de modo consistente e similar à forma como fazemos com CSS. As propriedades de estilo pertencem ao namespace
1 | tts |
e podem também ser utilizadas nas tags de texto da legenda e na tag
1 | region |
. Um estilo (semelhante a uma classe CSS), é criado a partir da tag style e deve conter um id que irá utilizado para associar este estilo a outros elementos.
As opções de alinhamento de texto são um pouco diferentes do convencional. Com exceção do center, o alinhamento à esquerda é definido como start e à direita como end. Outras propriedades de formatação:
- tts:backgroundColor: aceita valores hexadecimais, RGB e cores por nome
- tts:displayAlign: aplicável somente à
1region
, define o alinhamento do bloco de conteúdo de forma semelhante ao float em CSS, porém tem como valores
1before(esquerda),
1center,
1after(direita)
- tts:extent: aplicável somente à raiz do documento DFXP (
1tt
) e à
1region, é utilizado para especificar largura e altura de uma region
- tts:fontStyle: aceita valores como
1italic<em> </em>
e
1oblique - tts:fontWeight: define o peso da fonte, aceita os valores
1normal
e
1bold - tts:lineHeight: altura da linha, aceita os valores normal ou uma altura especificada em uma unidade de medida
- tts:opacity: aplicável somente à tag
1region
, define transparência
- tts:origin: especifica as coordenadas x e y de origem de uma
1region
- tts:overflow: define o comportamento de uma
1region
quando o conteúdo estoura o espaço disponível. Aceita os valores
1visiblee
1hidden - tts:padding: espaçamento interno de uma
1region
, aceita valores da mesma forma que a propriedade
1paddingdo CSS
- tts:showBackground: define quando o plano de fundo de uma
1region
deve ser exibido. Aceita valores
1alwayse
1whenActive - tts:textOutline: aplica uma borda no texto. Deve conter a cor da borda, a espessura e o raio do desfoque (quanto maior, mais desfocada será a borda)
Layout: definindo regions
Uma
1 | region |
, conforme visto anteriormente, é um espaço para a apresentação de legenda. As regions do documento TTML são declararadas na tag
1 | layout |
. Uma region pode ter um estilo associado (definido previamente na tag
1 | styling |
) como também podem ter propriedades de estilo aplicadas diretamente à tag
1 | region |
.
Exemplo de uma region com id "legenda" que utiliza o estilo1 e aplica outras propriedades de formatação.
A tag layout também precisa especificar o namespace para estilos, mas se já foi declarado na tag
1 | tt |
, não há necessidade.
Ao contrário do que comentei no post anterior, não há obrigatoriedade de ter regions com id default e overlay, porém ao menos uma
1 | region |
deve ser especificada no documento. Caso haja apenas uma
1 | region |
, esta será considerada default, independente do id atribuído.
No exemplo oficial do W3C, o documento TTML possui 7 regions:
- default: a região padrão, abaixo do vídeo, para a exibição das legendas;
- overlay: região que ocupa toda a área útil do vídeo e é utilizada apenas para exibir o texto que apresenta o título do vídeo;
- tick1, tick2, tick3, tick4, ploc: regions menores, sem background, que são posicionadas em diferentes lugares do vídeo e são utilizadas para descrever o barulho do relógio de da torneira.
O corpo do documento TTML
O corpo do documento tem como raiz a tag
1 | body |
, um elemento de estruturação temporal que tem a função de armazenar as sequências de conteúdo textual. Dentro do
1 | body |
são aceitas as tags:
- div: uma divisão para as legendas em um agrupamento lógico. Não é obrigatório o uso de
1div
, apenas se você tem vários tipos de legendas de deseja separá-las em grupos distintos. Uma
1divpode conter outras
1divs;
- p: tem a mesma função da tag
1p
do HTML, um paragráfo de conteúdo. É o container principal para o texto de legenda;
- span: tem a mesma função da tag
1span
do HTML, é um elemento de linha. Pode ser utilizada para estilizar parte de um texto contido em um
1p, por exemplo, aplicar negrito, itálico, cor diferenciada, etc;
- br: quebra de linha.
Todas estas tags aceitam, além dos atributos de estilo, os seguintes atributos:
- begin: especifica o início do intervalo de tempo em que o elemento será exibido;
- dur: especifica a duração do intervalo de tempo;
- end: especifica o término do intervalo de tempo. A documentação do W3C não clarifica se é necessário ter um
1begin
quando se utiliza o
1end;
- region: associa o elemento a uma
1region
onde será alocado o elemento;
- timeContainer: especifica um contexto temporal onde os nós filhos do elemento estarão temporalmente situados. Este atributo aceita dois valores:
1par
e
1seq. Se o
1timeContainerfor
1par, o intervalo temporal dos nós filhos é aplicado em pararelo, ou seja, de forma simultânea no tempo. Além disso, o intervalo de tempo dos nós filhos é relativo ao intervalo de tempo do elemento pai. Se o
1timeContainerfor
1seq, o intervalo temporal dos nós filhos é aplicado de forma sequencial no tempo e o intervalo de tempo dos nós filhos é relativos aos seus nós irmãos. Caso seja o primeiro nó filho, o intervalo de tempo é relatrivo ao tempo do elemento pai. Se um container de elementos de tempo (ex.: uma
1divque é container para vários
1p) não especificar
1timeContainer, será considerado que o
1timeContaineré
1par;
O W3C tem uma definição específica de expressão de tempo, que pode ser clock-time (hora:minuto:segundo[.frame]) ou offset-time (valor ou fração seguido de unidade de medida de tempo, ex.: 1h, 15m, 10s, 0.6s).
Para exemplificar, vamos observar alguns trechos de código do exemplo do W3C:
O corpo do documento TTML define o
1 | timeContainer |
como
1 | par |
, portanto, os nós filhos serão exibidos simultaneamente e o intervalo de tempo é relativo ao
1 | body |
.
Plop!
Plop!
Plop!
Plop!
Plop!
Plop!
Plop!
Plop!
Plop!
Plop!
Esta
1 | div |
agrupa uma série de legendas que serão exibidas na
1 | region "plop" |
, sendo que elas começam a ser exibidas a partir de 8s do vídeo e duram 7s, de acordo com os atributos
1 | begin |
e
1 | dur |
. Nesta
1 | div |
, o
1 | timeContainer |
é definido como
1 | seq |
e aqui valem algumas observações importantes que vocês podem reparar no vídeo. O primeiro
1 | p |
, nó filho da
1 | div |
, não possui o atributo
1 | begin |
pois nesse caso o intervalo de tempo é relativo ao elemento pai. Ele tem duração de 0.4s. Reparem que os próximos
1 | p |
s começam aos 0.5s (relativo ao
1 | p |
anterior) e também têm a duração de 0.4s, sendo exibidos sequencialmente, ou seja, em nenhum momento eles coexistem na cena. Se o atributo
1 | begin |
não estivesse especificado, elas seriam exibidas sequencialmente considerando somente o atributo
1 | dur |
sem uma definição de intervalo para ser exibida após o elemento anterior.
Tick!
Tick!
Plop!
Plop!
Tick!
Tick!
Plop!
Esta outra
1 | div |
não possui uma associação com
1 | region |
, ela apenas agrupa os
1 | p |
s e define o intervalo inicial do tempo e a duração. Diferentemente do trecho anterior, a associação à
1 | region |
é definida em cada
1 | p |
. O
1 | timeContainer |
é definido como
1 | par |
, neste caso o atributo
1 | begin |
de cada
1 | p |
é relativo ao intervalo de tempo da
1 | div |
e podem ser exibidos simultaneamente.
E um exemplo que não utiliza o
1 | timeContainer |
(assumindo o valor
1 | par |
como default) e define os intervalos de tempo de início e duração diretamente nos
1 | p |
s utilizando o formato clock-time:
[Clock ticking]
[tick, tick, tick]
[Water dropping]
[plop, plop, plop]
[Water dropping and clock ticking]
[plop, plop, plop]
[tick, tick, tick]
[Clock ringing]
[LOUD RING]
...
Este é o trecho de código referente às legendas exibidas na
1 | region "default" |
. Neste exemplo também há o uso de
1 | span</span> demonstrando trechos de legenda em um mesmo <code>p |
que possui uma estilização diferenciada.
Associando um documento DFXP a um vídeo
As legendas são associadas a um vídeo através da tag
1 | text |
. É especificado a linguagem no atributo
1 | lang |
, o que permite que a associação de múltiplos arquivos de legenda, o atributo
1 | type="application/ttaf+xml" |
e o
1 | src |
apontando o caminho do arquivo.
No exemplo do W3C, também é utilizada uma API em JavaScript para permitir que todos ou a maioria dos navegadores exibam o player de vídeo e as legendas. Navegadores mais recentes possuem o player nativo, mas a API garante que outros navegadores sejam capazes de executar as mesmas funções, inclusive, a exibição de legendas.
Para saber mais
O conteúdo deste artigo e os os exemplos foram baseados na documentação do W3C para a TTML e o TTAF-DFXP.
-
http://www.nerdhead.com.br/ Rafael Cirolini
-
http://www.cassiolacerda.com.br Cássio Lacerda