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 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 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 ttm (timed text metadata).

<metadata xmlns:ttm="http://www.w3.org/ns/ttml#metadata">
    <ttm:title>Exemplo de documento TTML</ttm:title>
    <ttm:copyright>The Authors (c) 2011</ttm:copyright>
</metadata>

O endereço do namespace ttm definido na tag metadata assim como o namespace para estilos (tts), podem ser definidos logo na tag tt, deixando o código um pouco mais limpo e organizado.

<tt xml:lang="en"
    xmlns="http://www.w3.org/ns/ttml"
    xmlns:tts="http://www.w3.org/ns/ttml#styling"
    xmlns:ttm="http://www.w3.org/ns/ttml#metadata">
...
</tt>

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 tts e podem também ser utilizadas nas tags de texto da legenda e na tag 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.

<styling xmlns:tts="http://www.w3.org/ns/ttml#styling">
    
    <style xml:id="estilo1"
        tts:color="white"
        tts:fontFamily="proportionalSansSerif"
        tts:fontSize="22px"
        tts:textAlign="center"
    />