Primeiros passos com o elemento de rastreamento

HTML5 Rocks

Primeiros passos com o elemento track em HTML5

O elemento track fornece uma maneira simples e padronizada de adicionar legendas de tradução, legendas ocultas, descrições de leitor de tela e capítulos em vídeo e áudio.

As faixas também podem ser usadas para outros tipos de metadados com marcação de tempo. Os dados de origem para cada elemento track consistem em um arquivo de texto formado por uma lista de cues com marcação de tempo, e os cues podem incluir dados em formatos como JSON ou CSV. Isso é extremamente eficaz, permite links diretos e navegação de mídia por pesquisa de texto (por exemplo) ou manipulação DOM e outro comportamento sincronizado com reprodução de mídia.

O elemento track está atualmente disponível no Internet Explorer 10 (link em inglês) e Google Chrome 18ou superior (link em inglês). O suporte do Firefox ainda não foi implementado (link em inglês). No Google Chrome, o suporte ao elemento track deve ser ativado na página chrome://flags.

Abaixo, temos um exemplo simples de um vídeo com elemento track. Reproduza o vídeo para ver as legendas em inglês:

Essa demonstração exige um navegador como o Google Chrome Canary (link em inglês) que suporte o elemento track. No Google Chrome, o suporte ao elemento track deve ser ativado na página chrome://flags.

O código para um elemento de vídeo com legendas em inglês e alemão deve ficar assim:

<video src="foo.ogv">
  <track kind="subtitles" label="English subtitles" src="subtitles_en.vtt" srclang="en" default></track>
  <track kind="subtitles" label="Deutsche Untertitel" src="subtitles_de.vtt" srclang="de"></track>
</video>

Nesse exemplo, o elemento de vídeo exibe um seletor que dá ao usuário opções de idiomas para a legenda. (até a data do artigo, isso ainda não havia sido implementado).

O elemento track não pode ser usado de um URL file://. Para ver as faixas funcionando, coloque arquivos em um servidor da Web.

Cada elemento track tem um atributo para kind que pode ser subtitles, captions, descriptions, chapters ou metadata. O atributo src do elemento track aponta para um arquivo de texto que mantém dados para cues de faixa com marcação de tempo, que podem estar em qualquer formato que um navegador possa processar. O Google Chrome suporta WebVTT, o que pode ser visto aqui:

WEBVTT FILE

railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth

manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.

Cada item de um arquivo de faixa é chamado de cue. Cada cue tem um tempo de início e de fim separados por uma seta, e o texto do cue fica na linha de baixo. Os cues podem opcionalmente ter as IDs "railroad" e "manuscript" nos exemplos acima. Os cues são separados por uma linha vazia.

Os tempos do cue têm o formato horas:minutos:segundos:milissegundos. Atenção! O processamento é rigoroso. Os números devem ser preenchidos com zeros se necessário: horas, minutos e segundos devem ter dois dígitos (00 para o valor zero) e milissegundos devem ter três dígitos (000 para zero). Este é um excelente validador de WebVTT quuz.org/webvtt (link em inglês), ele verifica se há erros na formatação do tempo e problemas como tempos não sequenciais.

A demonstração a seguir mostra como como fazer pesquisas nas legendas para navegar em um vídeo.

Como usar HTML e JSON em cues

O texto de um cue em um arquivo WebVTT pode ocupar várias linhas, desde que nenhuma delas esteja em branco. Isso significa que os cues podem incluir HTML:

WEBVTT FILE

multiCell
00:01:15.200 --> 00:02:18.800
<p>Multi-celled organisms have different types of cells that perform specialised functions.</p>
<p>Most life that can be seen with the naked eye is multi-cellular.</p>
<p>These organisms are though to have evolved around 1 billion years ago with plants, animals and fungi having independent evolutionary paths.</p>

Por que parar aqui? Os cues também podem usar JSON:

WEBVTT FILE

multiCell
00:01:15.200 --> 00:02:18.800
{
"title": "Multi-celled organisms",
"description": "Multi-celled organisms have different types of cells that perform specialised functions.
  Most life that can be seen with the naked eye is multi-cellular. These organisms are though to
  have evolved around 1 billion years ago with plants, animals and fungi having independent
  evolutionary paths.",
"src": "multiCell.jpg",
"href": "http://en.wikipedia.org/wiki/Multicellular"
}

insects
00:02:18.800 --> 00:03:01.600
{
"title": "Insects",
"description": "Insects are the most diverse group of animals on the planet with estimates for the total
  number of current species range from two million to 50 million. The first insects appeared around
  400 million years ago, identifiable by a hard exoskeleton, three-part body, six legs, compound eyes
  and antennae.",
"src": "insects.jpg",
"href": "http://en.wikipedia.org/wiki/Insects"
}

A capacidade de usar dados estruturados em cues torna o elemento track extremamente eficaz e flexível. Um aplicativo da web pode monitorar eventos de cue, extrair o texto de cada cue quando acionado, processar os dados e usar os resultados para fazer alterações DOM (ou executar outras tarefas de JavaScript ou CSS) sincronizadas com a reprodução de mídia.

As faixas podem também agregar valor ao áudio e vídeo, tornando a busca mais fácil, mais eficaz e mais precisa.

Os cues contêm texto que pode ser indexado e um tempo de início que significa o "local" temporal do conteúdo na mídia. Os cues podem até mesmo incluir dados sobre a posição dos itens no quadro do vídeo. Combinadas com URIs de fragmento de mídia (link em inglês), as faixas podem ser um mecanismo eficiente para localizar e navegar no conteúdo de áudio e vídeo. Por exemplo, imagine uma busca por "Etta James" que retorne resultados com links diretos para pontos do vídeo em que o nome dela apareça no texto do cue.

A demonstração A Árvore da Vida (link em inglês) é um exemplo de como uma faixa de metadados pode ser usada para permitir a navegação por meio de busca na legenda – e também mostra como os metadados com marcação de tempo podem permitir a manipulação DOM sincronizada com a reprodução de mídia.

Como localizar faixas e cues o JavaScript

Elementos de áudio e vídeo têm uma propriedade textTracks que retorna um TextTrackList, do qual cada membro é um TextTrack que corresponde a um elemento <track>:

var videoElement = document.querySelector("video");
var textTracks = videoElement.textTracks; // one for each track element
var textTrack = textTracks[0]; // corresponds to the first track element
var kind = textTrack.kind // e.g. "subtitles"
var mode = textTrack.mode // 0 (TextTrack.OFF in spec, TextTrack.DISABLED in Chrome), 1 (TextTrack.HIDDEN) or 2 (TextTrack.SHOWING)

Cada TextTrack, por sua vez, tem uma propriedade cues que retorna um TextTrackCueList, do qual cada membro é um cue individual. Os dados dos cues podem ser acessados com propriedades como startTime, endTime e text (usada para obter o conteúdo de texto de um cue):

var cues = textTrack.cues;
var cue = cues[0]; // corresponds to the first cue in a track src file
var cueId = cue.id // cue.id corresponds to the cue id set in the WebVTT file
var cueText = cue.text; // "The Web is always changing", for example (or some JSON!)

Algumas vezes, é mais fácil chegar aos objetos TextTrack pelo HTMLTrackElement:

var trackElements = document.querySelectorAll("track");
// for each track element
for (var i = 0; i < trackElements.length; i++) {
  trackElements[i].addEventListener("load", function() {
    var textTrack = this.track; // gotcha: "this" is an HTMLTrackElement, not a TextTrack object
    var isSubtitles = textTrack.kind === "subtitles"; // for example...
    // for each cue
    for (var j = 0; j < textTrack.cues.length; ++j) {
      var cue = textTrack.cues[j];
      // do something
    }
}

Como neste exemplo, as propriedades de TextTrack são acessadas por uma propriedade de track do elemento track, não pelo próprio elemento.

TextTracks são acessíveis depois que o evento load é acionado (e não antes).

Eventos de faixa e cue

Os dois tipos de evento de cue são:

  • eventos de entrada e saída acionados para cues
  • eventos cuechange acionados para faixas.

No exemplo anterior, os ouvintes do evento de cue poderiam ter sido adicionados assim:

cue.onenter = function(){
  // do something
};

cue.onexit = function(){
  // do something else
};

Lembre-se de que os eventos de entrada e saída são acionados apenas quando a reprodução entra e sai dos cues. Se o usuário arrastar o controle deslizante da linha do tempo manualmente, um evento cuechange será acionado para a faixa no novo tempo, mas não serão acionados eventos de entrada e saída. Para contornar isso, basta monitorar o evento de faixa cuechange e obter os cues ativos. Pode haver mais de um cue ativo.

O exemplo a seguir obtém o cue atual, quando o cue muda, e tenta criar um objeto pelo processamento do texto do cue:

textTrack.oncuechange = function (){
  // "this" is a textTrack
  var cue = this.activeCues[0]; // assuming there is only one active cue
  var obj = JSON.parse(cue.text);
  // do something
}

Além dos vídeos

Não esqueça que as faixas podem ser usadas com áudio e também com vídeos, e que não é necessário haver áudio, vídeo ou elementos track na marcação HTML para poder usar as APIs. A documentação (link em inglês) da API TextTrack oferece um bom exemplo disso, mostra uma maneira interessante de implementar "sprites" de áudio:

var sfx = new Audio('sfx.wav');
var track = sfx.addTextTrack('metadata'); // previously implemented as addTrack()

// Add cues for sounds we care about.
track.addCue(new TextTrackCue('dog bark', 12.783, 13.612, '', '', '', true));
track.addCue(new TextTrackCue('kitten mew', 13.612, 15.091, '', '', '', true));

function playSound(id) {
  sfx.currentTime = track.getCueById(id).startTime;
  sfx.play();
}

playSound('dog bark');
playSound('kitten mew');

O método addTextTrack tem três parâmetros: kind (por exemplo, "metadata", acima), label (por exemplo, "Sous-titres français") e language (por exemplo, "fr").

O exemplo acima também usa addCue, que toma um objeto TextTrackCue (link em inglês), o construtor para o qual usa um id (por exemplo "latido de cachorro"), um startTime, um endTime, o cue text, um argumento webVTT cue settings (link em inglês) (para posicionamento, tamanho e alinhamento) e um sinal boleano pauseOnExit (por exemplo, para pausar a reprodução depois de fazer uma pergunta em um vídeo educacional).

Observe que startTime e endTime usam valores de ponto flutuante em segundos e não no formato horas:minutos:segundos:milissegundos usado pelo WebVTT.

Os cues também podem ser removidos com removeCue(), que toma um cue como seu argumento, por exemplo:

var videoElement = document.querySelector("video");
var track = videoElement.textTracks[0];
var activeCue = track.activeCues[0];
track.removeCue(activeCue);

Se tentar fazer isso, você perceberá que um cue renderizado será removido assim que o código for chamado.

As faixas têm um atributo mode que pode ser 0 (TextTrack.OFF na especificação, TextTrack.DISABLED no Google Chrome), 1 (TextTrack.HIDDEN) ou 2 (TextTrack.SHOWING). Isso pode ser útil quando se deseja usar os eventos de faixa, mas deseja desligar a renderização padrão – assista ao seguinte vídeo para ver um exemplo disso (vídeo de Eric Bidelman link em inglês):

test1
asdf2

Este exemplo usa o método getCueAsHTML() que retorna uma versão HTML de cada cue, convertendo de um formato WebVTT para um DocumentFragment em HTML usando o processamento (link em inglês) do texto de cue do WebVTT e as regras de construção DOM (link em inglês). Use a propriedade text de um cue, se desejar obter o valor do texto não processado do cue como consta no arquivo src.

Neste contexto, pode ser útil usar o método getCueAsHTML() que retorna uma versão HTML de cada cue, convertendo de um formato WebVTT para um DocumentFragment em HTML usando o processamento (link em inglês) do texto de cue do WebVTT e as regras de construção DOM (link em inglês). Use a propriedade text de um cue, se desejar obter o valor do texto não processado do cue como consta no arquivo src.

Mais sobre marcação

É possível adicionar marcação à linha do carimbo de data e hora de um cue para especificar a direção, alinhamento e posicionamento do texto. O texto do cue pode ser marcado para especificar voz (por exemplo, para identificar os interlocutores) e para adicionar formatação. As legendas de tradução e legendas ocultas podem ser manipuladas com CSS, desta forma:

::cue {
  color: #444;
  font: 1em sans-serif;
}
::cue .warning {
  color: red;
  font: bold;
}

Os slides Acessibilidade de vídeo em HTML5 (link em inglês) da Silvia Pfeiffer fornecem mais exemplos de trabalho com marcação – e também mostram como construir faixas de capítulos para faixas de descrição e navegação para leitores de tela.

E finalmente...

Armazenar dados de cue em arquivos de texto, em vez de codificá-los na banda em arquivos de áudio ou vídeo, aumenta a objetividade do processo de criação de legendas de tradução e legendas ocultas &ndash e pode melhorar a acessibilidade, a capacidade de pesquisa e a portabilidade dos dados.

O elemento track também permite o uso dos metadados com marcação de tempo e conteúdo dinâmico vinculado à reprodução da mídia, o que, por sua vez, agrega valor aos elementos de áudio e vídeo.

Por sua eficiência, flexibilidade e simplicidade, o elemento track é um grande passo para tornar a mídia na Web mais aberta e dinâmica.

Saiba mais

Comments

0