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 valoresbefore
(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<em> </em>
eoblique
- 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 valoresbefore
(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<em> </em>
eoblique
- 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 valoresvisible
ehidden
- 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 valoresbefore
(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<em> </em>
eoblique
- 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 valoresbefore
(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<em> </em>
eoblique
- 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 valoresvisible
ehidden
- 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 valoresbefore
(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<em> </em>
eoblique
- 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 valoresbefore
(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<em> </em>
eoblique
- 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 valoresvisible
ehidden
- 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 valoresbefore
(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<em> </em>
eoblique
- 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 valoresbefore
(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<em> </em>
eoblique
- 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 valoresvisible
ehidden
- 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
ewhenActive
- 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. Umadiv
pode conter outrasdiv
s; - 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 ump
, 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 oend
; - 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
eseq
. Se otimeContainer
forpar
, 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 otimeContainer
forseq
, 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.: umadiv
que é container para váriosp
) não especificartimeContainer
, será considerado que otimeContainer
é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 p
s 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 p
s 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 p
s 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</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 text
. É especificado a linguagem no atributo lang
, o que permite que a associação de múltiplos arquivos de legenda, o atributo type="application/ttaf+xml"
e o 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.