30/1/13

Videotexto interactivo y aplicación a la literatura digital






La posibilidad de combinar vídeo y texto de manera interactiva, en una literatura digital visual que no pierda la palabra como fundamento básico, puede estar más cerca con la llegada de HTML5 aunque los comandos que permiten esta interactividad aún no son soportados por buena parte de los navegadores y habrá que esperar  a que se popularicen y acepten masivamente.

Hay ya bastantes trabajos de literatura digital- sobre todo, poesía digital- que utilizan el vídeo como soporte pero casi todos ellos se basan sólo en superponer textos (que quizá se muevan por la pantalla) y carecen de interactividad. Las imágenes y la música se combinan con el texto de manera estética pero estática, y por lo general el lector sólo puede ver el resultado final en un discurso lineal y preprogramado. Se comprende, en este contexto, que podría enriquecerse la obra si se pudieran añadir párrafos o efectos visuales dinámicamente, si se pudiesen crear caminos de lectura o visionado alternativos, si el vídeo, los textos o las imágenes fueran distintos en función de las acciones del usuario-lector, si, por así decirlo, se pudiera bifurcar el desarrollo del vídeo creando, así, numerosas lecturas diferenciadas.

Desde el punto de vista de la programación esto es complicado. Existen ya algunas opciones que pasan por embeber el fichero de vídeo (un MP4 o un AVI, por ejemplo) en un fichero ejecutable de modo que se añadan capas que permitan la interacción, aunque por lo general son operaciones sencillas (pausar el vídeo, detenerlo, etc. como por ejemplo permiten hacer programas como ProShow Producer).  También (como suele verse en Youtube o Hulu) existen métodos de añadir etiquetas a las imágenes en ciertos momentos del vídeo, por ejemplo utilizando el estándar SRT. La subtitulación propia del cine no es interactiva.

 
HTML5 propone el elemento track que podría ser una solución para conseguir vídeotexto interactivo de manera mucho más sencilla. Esta etiqueta, como se mencionó, está sólo disponible hoy por hoy en ciertos navegadores de muy última generación por lo que se si se desea una compatibilidad generalizada, aún no ha llegado el momento de su uso. De hecho, en Chrome es preciso configurar de manera especial algunas opciones e IE10 parece soportarlo parcialmente para Windows 8. En el futuro, se prevé que el estándar WebVTT (Web Video Text Tracks), un formato destinado a sincronizar textos e imágenes, se implemente plenamente en los navegadores para trabajar con la instrucción track.

Con track, que se utiliza en unión a la instrucción video, no sólo pueden añadirse etiquetas o subtítulos sino que el navegador aplica una capa invisible e interactiva a las imágenes para permitir a los creadores añadir una variada gama de metadatos y acciones a los vídeos. La especificación de  track  dispone de una gama de atributos que proporciona un uso muy versátil para una única instrucción, facilitando la programación. En concreto, permite cinco diferentes utilizaciones mediante el atributo kind que se añade a la línea de comando. Las tres primeras son simplemente una manera de simplificar la programación de lo que ya se hace por otros medios (lo que no es poco) siendo las dos últimas las que realmente aportan conceptos novedosos.

 

·        subtitles, que añade subtítulos a las imágenes, de manera similar a los convencionales en cualquier película. En principio, son una traducción de los diálogos del vídeo. Los navegadores muestran los subtítulos sobreimpresos a las imágenes.

·        captions, similares a los anteriores pero que no traducen un diálogo sino que añaden información escrita en ciertos momentos. Conceptualmente, son muy similares. Al igual que con los subtítulos, se muestran sobreimpresos. Se usan por ejemplo para indicar con palabras los sonidos de la banda sonora, algo útil cuando el ambiente sonoro es muy ruidoso y no puede escucharse en original.

·        descriptions, que son como los captions pero hablados, es decir en vez de mostrarse un texto sobre las imágenes, se escucha- en un momento dado- una voz que lee ese texto. Esta voz puede ser grabada o generada por ordenador.

·        chapters, que permite trocear el vídeo en partes (capítulos) y saltar de uno a otro a voluntad del usuario o, dicho de otro modo permite navegar por el vídeo de manera racional y programada.

·        metadata, que permite sincronizar cualquier tipo de información (texto, imágenes, sonidos, etc.) en un momento preciso del vídeo o en un determinado periodo del mismo.

 

Estos atributos se disparan cuando se llega a ciertos instantes de la grabación. La definición de estos “momentos” así como de lo que debe de hacerse en ellos se almacena en los llamados cues. Cuando se llega a un cue programado, puede arrancarse una rutina javascript que muestre la información que se desee asociar a ese momento. La programación en el estándar WebVTT de los cues es sencilla: primero, un identificador; se apuntan debajo los  instantes temporales en que debe comenzar y terminar de aparecer el mensaje (horas: minutos: segundos: milisegundos), separados por una flecha; y se termina escribiendo debajo el texto a mostrar. Cada cue se separa por una línea en blanco del siguiente.

 

WEBVTT FILE

 

Saturno

00:00:12.000 --> 00:00:19.730

La vista de Saturno con sus anillos es magnífica desde la cámara de la nave.

 

Urano

00:02:12.000 --> 00:02:16.200

Urano, tumbado sobre sí mismo, aparece envuelto en una atmosfera pálida y azulada.

 

El texto a mostrar admite codificación HTML por lo que puede ser tan complejo como se desee:

 

WEBVTT FILE

 

Sistema Solar

00:01:10.200 --> 00:02:20.000

<p>Aunque las dimensiones del Sistema Solar nos puedan parecer enormes, lo cierto es que no suponen sino un infinitesimal de la galaxia.</p>

<p>Nuestra nave más lejana, la Voyager, apenas está saliendo del sistema a unas 15 horas-luz de nuestro planeta, </p>

<p>cuando sólo la distancia a la estrella más cercana es de más de 4 años-luz.</p>

 

 

O bien:

 

WEBVTT FILE

 

Sistema Solar

00:01:10.200 --> 00:02:20.000

{

"title": "Sistema Solar",

"description": " Aunque las dimensiones del Sistema Solar

nos puedan parecer enormes,

lo cierto es que no suponen sino un infinitesimal de la galaxia.",

"src": "Nube_Oort.jpg",

"href": " http://es.wikipedia.org/wiki/Nube_de_Oort"

}

 

Galaxia

00:05:18.100 --> 00:06:00.600

{

"title": "La Vía Láctea",

"description": "La Vía Láctea contiene unos cien mil millones de estrellas, de

las cuales nuestro sol es sólo una más. Hay que señalar, no obstante,

que la mayoría de las estrellas son enanas rojas existiendo menos

estrellas amarillas (más evolucionadas) y azules. En este contexto,

nuestro Sol es un astro ordinario pero no tanto.",

"src": "sol.jpg",

"href": "http://es.wikipedia.org/wiki/sol"

}

 

¿Y cómo ligamos los cues con la instrucción track?

 

Se logra por medio de la propiedad textTracks que cada elemento de vídeo o audio posee. Esta propiedad devuelve una lista de variables TextTrackList cada una de las cuales es una TextTrack del elemento track:

 

var videoElement = document.querySelector("video");

var textTracks = videoElement.textTracks;

var textTrack = textTracks[0]; // sería el primer elemento

var kind = textTrack.kind // por ejemplo  "chapters"

var mode = textTrack.mode // por ejemplo, "disabled", hidden" or "showing"

 

Cada TextTrack, tiene también una lista de cues devuelta en una TextTrackCueList:

 

var cues = textTrack.cues;

var cue = cues[0]; // el primer cue en el fichero src

var cueId = cue.id // identificador del cueen el fichero WebVTT

var cueText = cue.text;

 

 

Hay dos tipos de eventos que afectan a los cues:

 

i* nicio y arranque del cue

* cambio de cue

 

Por ejemplo:  

cue.onenter = function(){

  // instrucciones a ejecutar

};

 

cue.onexit = function(){

  // instrucciones a ejecutar

};

 

(Nota: si el usuario mueve el cursor de tiempo del vídeo manualmente no se disparan los eventos de entrada y salida y hay que utilizar el de cambio)

 

Igualmente, la técnica puede usarse para audio:

 

var sfx = new Audio('sinfonia.wav');

var track = sfx.addTextTrack('metadata');

track.addCue(new TextTrackCue(16.113, 18.222, 'solodeoboe'));

track.addCue(new TextTrackCue(53.102, 65.044, 'directorpensativo'));

 

function playSound(id) {

  sinfonia.currentTime = track.getCueById(id).startTime;

  sinfonia.play();

}

 

playSound('solodeoboe');

playSound('directorpensativo');

 

Por ejemplo, este código mostraría un menú de elección entre dos idiomas para que el usuario elija en cuál de ellos desea los subtítulos:

 

<video src="video.mp4">

  <track kind="subtitles" label="Subtitular en español" src="subtitles_es.vtt" srclang="en" default></track>

  <track kind="subtitles" label="English Subtitles" src="subtitles_en.vtt" srclang="de"></track>

</video>


El atributo src de la instrucción apunta a un fichero de texto que indica los cues antes citados.  

 
Con los atributos chapters y metadata son posibles diversos estilos de interactividad. Así, por ejemplo:

 

·        En este ejemplo puede verse una aplicación en la que es posible saltar a otro capítulo con tan sólo pulsar sobre el enlace (recuérdese que debe lanzarlo en un navegador que tenga implementado track, como por ejemplo Chrome o IE10)

·        En este ejemplo se implementa una búsqueda por palabras de modo que al clickar sobre una de las palabras predeterminadas, el vídeo salta al momento en que se habla de tal palabra.

·        En este ejemplo van apareciendo descripciones adicionales a lo que se ve en la imagen que pueden ser escritas (abajo, en el ejemplo) o sonoras (si se configura el navegador para que pueda hacerlo).

·        En este ejemplo, se muestran iconos sobre la barra de avance del vídeo , una técnica que ya es habitual, por ejemplo, en Youtube.

·        En este ejemplo, aparecen imágenes en ciertos momentos del vídeo a voluntad de la interacción del usuario. Y quien dice imágenes, puede decir ficheros de cualquier tipo ( textos, presentaciones en power point, otros vídeos, etc. Hay interactividad on-time.

 

También es posible la traducción multilingüe de la obra. Podemos imaginar, por ejemplo, que el código HTML detecte el idioma del navegador (algo usual) y en función de esto se sobreimpriman los textos ya traducidos al idioma del usuario de manera dinámica. Incluso, en obras con personajes de varias nacionalidades (una historia sobre la guerra entre rusos y japoneses en la segunda guerra mundial, por ejemplo) puede dejarse que cada uno hable en su lengua nativa y que los subtítulos cambien o no a voluntad del lectoespectador.

Compatibilidad actual

·        En IE10, la instrucción track está implementada pero sólo soportan versiones básicas del estándar WebVTT y del formato TTML. En este enlace puede leerse documentación al respecto.

·        En Google Chrome se soporta track pero es necesario activarla. Para hacerlo puede verse la página chrome://flags en su apartado “Enable element”. Google Chrome soporta solamente  WebVTT. Para más información puede visitarse HTML5Rocks.

·        Safari soporta track y WebVTT.

·        Opera lanzó a finales del año pasado, el soporte de track

·        Firefox, de momento, no la soporta.

 
Aplicaciones a la literatura digital
 
Como se decía al inicio, HTML5 puede permitir un videotexto interactivo de modo que el texto, la narración, tomen protagonismo y no sólo sean un mero acompañamiento de la imagen. Por otro lado, al poder implementarse una amplia interacción se puede desarrollar un hipervídeotexto.
 
Ahora, sólo se trata de ponerse manos a la obra.