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).

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.

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.

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 à region, define o alinhamento do bloco de conteúdo de forma semelhante ao float em CSS, porém tem como valores before (esquerda), center, after (direita)
• tts:extent: aplicável somente à raiz do documento DFXP (tt) e à region, é utilizado para especificar largura e altura de uma region
• tts:fontStyle: aceita valores como italic e oblique
• tts:fontWeight: define o peso da fonte, aceita os valores “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).

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.

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.

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 à region, define o alinhamento do bloco de conteúdo de forma semelhante ao float em CSS, porém tem como valores before (esquerda), center, after (direita)
• tts:extent: aplicável somente à raiz do documento DFXP (tt) e à region, é utilizado para especificar largura e altura de uma region
• tts:fontStyle: aceita valores como italic e oblique
• tts:fontWeight: define o peso da fonte, aceita os valores“ e bold
• tts:lineHeight: altura da linha, aceita os valores normal ou uma altura especificada em uma unidade de medida
• tts:opacity: aplicável somente à tag region, define transparência
• tts:origin: especifica as coordenadas x e y de origem de uma region
• tts:overflow: define o comportamento de uma region quando o conteúdo estoura o espaço disponível. Aceita os valores visible e hidden
• tts:padding: espaçamento interno de uma region, aceita valores da mesma forma que a propriedade “`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).

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.

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.

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 à region, define o alinhamento do bloco de conteúdo de forma semelhante ao float em CSS, porém tem como valores before (esquerda), center, after (direita)
• tts:extent: aplicável somente à raiz do documento DFXP (tt) e à region, é utilizado para especificar largura e altura de uma region
• tts:fontStyle: aceita valores como italic e oblique
• tts:fontWeight: define o peso da fonte, aceita os valores “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).

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.

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.

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 à region, define o alinhamento do bloco de conteúdo de forma semelhante ao float em CSS, porém tem como valores before (esquerda), center, after (direita)
• tts:extent: aplicável somente à raiz do documento DFXP (tt) e à region, é utilizado para especificar largura e altura de uma region
• tts:fontStyle: aceita valores como italic e oblique
• tts:fontWeight: define o peso da fonte, aceita os valores“ e bold
• tts:lineHeight: altura da linha, aceita os valores normal ou uma altura especificada em uma unidade de medida
• tts:opacity: aplicável somente à tag region, define transparência
• tts:origin: especifica as coordenadas x e y de origem de uma region
• tts:overflow: define o comportamento de uma region quando o conteúdo estoura o espaço disponível. Aceita os valores visible e hidden
• tts:padding: espaçamento interno de uma region, aceita valores da mesma forma que a propriedade“` do CSS
• tts:showBackground: define quando o plano de fundo de uma ““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).

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.

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.

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 à region, define o alinhamento do bloco de conteúdo de forma semelhante ao float em CSS, porém tem como valores before (esquerda), center, after (direita)
• tts:extent: aplicável somente à raiz do documento DFXP (tt) e à region, é utilizado para especificar largura e altura de uma region
• tts:fontStyle: aceita valores como italic e oblique
• tts:fontWeight: define o peso da fonte, aceita os valores “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).

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.

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.

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 à region, define o alinhamento do bloco de conteúdo de forma semelhante ao float em CSS, porém tem como valores before (esquerda), center, after (direita)
• tts:extent: aplicável somente à raiz do documento DFXP (tt) e à region, é utilizado para especificar largura e altura de uma region
• tts:fontStyle: aceita valores como italic e oblique
• tts:fontWeight: define o peso da fonte, aceita os valores“ e bold
• tts:lineHeight: altura da linha, aceita os valores normal ou uma altura especificada em uma unidade de medida
• tts:opacity: aplicável somente à tag region, define transparência
• tts:origin: especifica as coordenadas x e y de origem de uma region
• tts:overflow: define o comportamento de uma region quando o conteúdo estoura o espaço disponível. Aceita os valores visible e hidden
• tts:padding: espaçamento interno de uma region, aceita valores da mesma forma que a propriedade “`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).

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.

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.

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 à region, define o alinhamento do bloco de conteúdo de forma semelhante ao float em CSS, porém tem como valores before (esquerda), center, after (direita)
• tts:extent: aplicável somente à raiz do documento DFXP (tt) e à region, é utilizado para especificar largura e altura de uma region
• tts:fontStyle: aceita valores como italic e oblique
• tts:fontWeight: define o peso da fonte, aceita os valores “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).

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.

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.

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 à region, define o alinhamento do bloco de conteúdo de forma semelhante ao float em CSS, porém tem como valores before (esquerda), center, after (direita)
• tts:extent: aplicável somente à raiz do documento DFXP (tt) e à region, é utilizado para especificar largura e altura de uma region
• tts:fontStyle: aceita valores como italic e oblique
• tts:fontWeight: define o peso da fonte, aceita os valores“ e bold
• tts:lineHeight: altura da linha, aceita os valores normal ou uma altura especificada em uma unidade de medida
• tts:opacity: aplicável somente à tag region, define transparência
• tts:origin: especifica as coordenadas x e y de origem de uma region
• tts:overflow: define o comportamento de uma region quando o conteúdo estoura o espaço disponível. Aceita os valores visible e hidden
• tts:padding: espaçamento interno de uma region, aceita valores da mesma forma que a propriedade“` do CSS
• tts:showBackground: define quando o plano de fundo de uma““ deve ser exibido. Aceita valores always e whenActive
• 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 region, conforme visto anteriormente, é um espaço para a apresentação de legenda. As regions do documento TTML são declararadas na tag layout. Uma region pode ter um estilo associado (definido previamente na tag styling) como também podem ter propriedades de estilo aplicadas diretamente à tag 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 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 region deve ser especificada no documento. Caso haja apenas uma 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 body, um elemento de estruturação temporal que tem a função de armazenar as sequências de conteúdo textual. Dentro do 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 div, apenas se você tem vários tipos de legendas de deseja separá-las em grupos distintos. Uma div pode conter outras divs;
• p: tem a mesma função da tag p do HTML, um paragráfo de conteúdo. É o container principal para o texto de legenda;
• span: tem a mesma função da tag span do HTML, é um elemento de linha. Pode ser utilizada para estilizar parte de um texto contido em um p, 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 begin quando se utiliza o end;
• region: associa o elemento a uma region 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: par e seq. Se o timeContainer for par, 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 timeContainer for seq, 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 div que é container para vários p) não especificar timeContainer, será considerado que o timeContainer é par;

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 timeContainer como par, portanto, os nós filhos serão exibidos simultaneamente e o intervalo de tempo é relativo ao body.

Esta div agrupa uma série de legendas que serão exibidas na 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 begin e dur. Nesta div, o timeContainer é definido como seq e aqui valem algumas observações importantes que vocês podem reparar no vídeo. O primeiro p, nó filho da div, não possui o atributo begin pois nesse caso o intervalo de tempo é relativo ao elemento pai. Ele tem duração de 0.4s. Reparem que os próximos ps começam aos 0.5s (relativo ao 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 begin não estivesse especificado, elas seriam exibidas sequencialmente considerando somente o atributo dur sem uma definição de intervalo para ser exibida após o elemento anterior.

Esta outra div não possui uma associação com region, ela apenas agrupa os ps e define o intervalo inicial do tempo e a duração. Diferentemente do trecho anterior, a associação à region é definida em cada p. O timeContainer é definido como par, neste caso o atributo begin de cada p é relativo ao intervalo de tempo da div e podem ser exibidos simultaneamente.

E um exemplo que não utiliza o timeContainer (assumindo o valor par como default) e define os intervalos de tempo de início e duração diretamente nos ps utilizando o formato clock-time:

Este é o trecho de código referente às legendas exibidas na region "default". Neste exemplo também há o uso de span demonstrando trechos de legenda em um mesmo p que possui uma estilização diferenciada.