Introducción al elemento de pista

HTML5 Rocks

Introducción al elemento de pista de HTML5

El elemento de pista ofrece una forma sencilla y estandarizada de añadir subtítulos, descripciones para lectores de pantalla y capítulos a archivos de vídeo y audio.

Los elementos de pista también se pueden utilizar para otros tipos de metadatos con tiempos. Los datos de origen de cada elemento de pista están incluidos en un archivo de texto compuesto por una lista de cues. Estos cues pueden incluir datos en formatos como JSON o CSV. Este método es extremadamente potente y permite crear enlaces profundos y navegar por los medios a través de, por ejemplo, la búsqueda de texto o la manipulación de DOM y otros comportamientos sincronizados con la reproducción de medios.

Actualmente, el elemento de pista se encuentra disponible en Internet Explorer 10 y en Chrome 18. Firefox todavía no es compatible. En Chrome, debes habilitar la compatibilidad del elemento de pista en la página chrome://flags.

A continuación, se muestra un ejemplo sencillo de un vídeo con un elemento de pista. Reprodúcelo para ver los subtítulos en inglés.

Para ver esta demo, debes tener un navegador, por ejemplo, Google Chrome Canary que sea compatible con el elemento de pista. En Chrome, debes habilitar la compatibilidad del elemento de pista en la página chrome://flags.

El código para un elemento de vídeo con subtítulos en inglés y alemán tendría este aspecto:

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

En este ejemplo, el elemento de vídeo mostraría un selector que ofrecería al usuario la oportunidad de elegir el idioma de los subtítulos (aunque en lo que respecta a la escritura de código, esto aún no se ha implementado).

Ten en cuenta que el elemento de pista no se puede utilizar desde una URL file://. Para ver el funcionamiento de los elementos de pista, sube los archivos a un servidor web.

Cada uno de los elementos de pista tiene un atributo kind, que puede ser subtitles, captions, descriptions, chapters o metadata. El atributo src de elemento de pista indica un archivo de texto que contiene datos para cues de pista con tiempos, que pueden estar en cualquier formato que pueda analizar un navegador. Chrome es compatible con WebVTT, que tiene este aspecto:

WEBVTT FILE

railroad
00:00:10.000 --> 00:00:12.500
Poco inspirados por la corteza de tierra de ferrocarril

manuscrito
00:00:13.200 --> 00:00:16.900
que tocó el plomo hasta las páginas de tu manuscrito

Cada elemento incluido en un archivo de pista se denomina cue. Cada cue consta de un tiempo de inicio y un tiempo de finalización separados por una flecha y texto situado en la línea inferior. De forma opcional, los cues también pueden tener ID, como "ferrocarril" y "manuscrito" en los ejemplos anteriores. Los cues están separados por una línea en blanco.

Los tiempos de los cues se indican en el formato horas:minutos:segundos:milisegundos. Pero ten cuidado, pues el proceso de análisis es estricto. Los números se deben rellenar con ceros si fuera necesario: las horas, los minutos y los segundos deben tener dos dígitos (00 para un valor de cero) y los milisegundos deben tener tres dígitos (000 para cero). Existe una herramienta de validación de WebVTT en la página quuz.org/webvtt, que comprueba errores en el formato de tiempo y errores como tiempos no secuenciales.

La siguiente demo muestra cómo se pueden buscar subtítulos para navegar por el vídeo.

Cómo utilizar HTML y JSON en los cues

El texto de un cue de un archivo WebVTT puede ocupar varias líneas, siempre y cuando ninguna de ellas esté en blanco. Esto significa que los cues pueden incluir código HTML:

WEBVTT FILE

multiCell
00:01:15.200 --> 00:02:18.800
<p>Los organismos pluricelulares están formados por diferentes tipos de células que realizan funciones especializadas.</p>
<p>La mayoría de los seres vivos que se pueden ver a simple vista son pluricelulares.</p>
<p>Se cree que estos organismos evolucionaron hace aproximadamente mil millones de años dando lugar a líneas evolutivas independientes en plantas, animales y hongos.</p>

¿Por qué no ir más allá? Los cues también pueden utilizar código JSON:

WEBVTT FILE

multiCell
00:01:15.200 --> 00:02:18.800
{
"title": "Organismos pluricelulares",
"description": "Los organismos pluricelulares están formados por diferentes tipos de células que realizan funciones especializadas.
  La mayoría de los seres vivos que se pueden ver a simple vista son pluricelulares. Se cree que estos organismos
  evolucionaron hace aproximadamente mil millones de años dando lugar a líneas evolutivas independientes
  en plantas, animales y hongos.",
"src": "pluricelular.jpg",
"href": "http://es.wikipedia.org/wiki/Pluricelular"
}

insectos
00:02:18.800 --> 00:03:01.600
{
"title": "Insectos",
"description": "Los insectos son el grupo de animales más diverso del planeta. Se estima que actualmente existe un número total
  de especies que oscila entre los dos y los cincuenta millones. Los primeros insectos aparecieron hace aproximadamente
  400 millones de años y se caracterizan por un sólido exoesqueleto, un cuerpo formado por tres partes, seis patas, ojos compuestos
  y antenas.",
"src": "insectos.jpg",
"href": "http://es.wikipedia.org/wiki/Insecta"
}

La capacidad de utilizar datos estructurados en los cues hace que el elemento de pista sea extremadamente potente y flexible. Una aplicación web puede procesar los eventos de cue, extraer el texto de cada cue mientras se ejecuta, analizar los datos y, a continuación, utilizar los resultados para realizar cambios DOM (o realizar otras tareas relacionadas con JavaScript o CSS) sincronizados con la reproducción de medios.

Los elementos de pista también pueden añadir valor a archivos de audio y vídeo haciendo que las búsquedas sean más fáciles, rápidas y precisas.

Los cues incluyen texto que se puede indexar y un tiempo de inicio que hace referencia a la "ubicación" temporal del contenido en el medio. Los cues incluso pueden contener datos sobre la posición de los elementos en un fotograma de vídeo. En combinación con las URI de fragmentos de medios, los elementos de pista pueden proporcionar un potente mecanismo para buscar contenido y navegar por él en archivos de audio y vídeo. Por ejemplo, imagina que realizas una búsqueda sobre "Etta James" que devuelve resultados que enlazan directamente con puntos de vídeos en los que se menciona su nombre en el texto de un cue.

La demo Árbol de la vida es un ejemplo sencillo de cómo se puede utilizar un elemento de pista para habilitar la navegación a través de búsquedas en subtítulos, y también muestra cómo los metadatos con tiempos pueden habilitar la manipulación de DOM sincronizados con la reproducción de medios.

Cómo obtener elementos de pista y cues con JavaScript

Los elementos de audio y vídeo tienen una propiedad textTracks que devuelve un elemento TextTrackList, cuyos componentes son elementos TextTrack que se corresponden con elementos <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)

A su vez, cada elemento TextTrack, cuenta con una propiedad cues que devuelve un elemento TextTrackCueList, cuyos componentes son cues individuales. Se puede acceder a los datos del cue mediante propiedades como startTime, endTime y text (utilizadas para obtener el contenido de texto del 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!)

A veces, tiene sentido obtener objetos TextTrack a través del elemento 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 se observa en este ejemplo, se accede a la propiedades TextTrack mediante la propiedad de un elemento track, no a través del elemento en sí.

A los elementos TextTrack se accede una vez se ha activado el evento load, nunca antes.

Eventos de cue y de pista

Existen dos tipos de evento de cue:

  • eventos de entrada y salida iniciados por cues,
  • eventos "cuechange" activados para elementos de pista.

En el ejemplo anterior, los detectores de eventos de cues se pueden haber añadido de la siguiente forma:

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

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

Ten en cuenta que los eventos de entrada y salida solo se activan cuando los cues entran o salen mediante la reproducción. Si el usuario arrastra el control deslizante de la línea de tiempo de forma manual, se activará un evento "cuechange" para el elemento de pista en el nuevo punto de tiempo; sin embargo, no se activarán los eventos de entrada y salida. Es posible evitar esto si se detecta el evento de pista "cuechange" y luego se obtienen los cues (ten en cuenta que puede haber más de un cue activo).

En el siguiente ejemplo, se obtiene el cue actual, cuando este cambia, y se intenta crear un objeto analizando el texto del 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
}

No solo para vídeo

No olvides que los elementos de pista se pueden utilizar tanto con archivos de audio como de vídeo, y recuerda también que no necesitas elementos de pista, vídeo o audio en el marcado HTML para aprovechar sus API. En la documentación sobre el API TextTrack puedes encontrar un buen ejemplo de ello; en él se muestra una manera sencilla de implementar sprites de audio.

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');

El método addTextTrack utiliza tres parámetros: kind (por ejemplo, "metadata", como en el ejemplo anterior), label (por ejemplo, "Sous-titres français") y language (por ejemplo, "fr").

El ejemplo anterior también utiliza addCue, que utiliza un objeto TextTrackCue, cuyo constructor utiliza un elemento id (por ejemplo, "ladrido de perro"), un elemento startTime, un elemento endTime, el elemento text de un cue, un argumento de configuración de cues de WebVTT(para el posicionamiento, el tamaño y la alineación) y un indicador booleano pauseOnExit (por ejemplo, para pausar la reproducción al plantear una pregunta en un vídeo educativo).

Ten en cuenta que startTime y endTime utilizan valores de puntos flotantes en segundos, no en el formato horas:minutos:segundos:milisegundos utilizado por WebVTT.

Los cues también se pueden eliminar con removeCue(), que utiliza el cue como su argumento, por ejemplo:

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

Si pruebas este método, observarás que se elimina un cue representado en cuanto se ejecuta el código.

Los elementos de pista tienen un atributo mode, que puede ser 0 (TextTrack.OFF en la especificación, TextTrack.DISABLED en Chrome), 1 (TextTrack.HIDDEN) o 2 (TextTrack.SHOWING). Esto puede resultar útil si quieres utilizar eventos de pista, pero también desactivar la representación predeterminada. Reproduce el siguiente vídeo (creado por Eric Bidelman) para ver un ejemplo de todo esto.

test1
asdf2

En este ejemplo, se utiliza el método getCueAsHTML(), que devuelve una versión HTML de cada cue, y realiza una conversión del formato WebVTT a DocumentFragment de HTML utilizando las reglas de análisis y construcción de DOM para texto de cues de WebVTT. Utiliza la propiedad text de un cue si solo quieres obtener el valor de texto subyacente del cue tal y como se encuentra en el archivo src.

En este contexto, puede resultar útil utilizar el método getCueAsHTML(), que devuelve una versión HTML de cada cue, y realizar una conversión del formato WebVTT a DocumentFragment de HTML utilizando las reglas de análisis y construcción de DOM para texto de cues de WebVTT. Utiliza la propiedad text de un cue si solo quieres obtener el valor de texto subyacente del cue tal y como se encuentra en el archivo src.

Más información sobre marcado

El marcado se puede añadir a la línea de las marcas de tiempo de un cue para especificar la posición, la alineación y la dirección del texto. El texto de un cue se puede marcar para especificar una voz (por ejemplo, para indicar el nombre de los hablantes) y para añadir formato. Los subtítulos se pueden manipular con CSS de la siguiente forma:

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

En las diapositivas sobre la accesibilidad de los vídeos en HTML5 de Silvia Pfeiffer, se muestran más ejemplos sobre cómo trabajar con marcas y también se indica cómo crear elementos de pista de capítulo para elementos de pista de descripción y navegación destinados a lectores de pantalla.

Y por último...

Almacenar datos de cues en archivos de texto, en lugar de codificarlos en banda en archivos de audio o vídeo, hace que la subtitulación resulte más sencilla y puede mejorar la accesibilidad, las búsquedas y la portabilidad de datos.

El elemento de pista también habilita el uso de metadatos con tiempos y contenido dinámico vinculados a la reproducción de medios, lo que a su vez añade valor a los elementos de audio y vídeo.

Debido a su potencia, flexibilidad y simplicidad, el elemento de pista representa un gran paso hacia el aumento de la apertura y el dinamismo de los medios en la Web.

Más información

Comments

0