Entradas
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.
0 comentarios :
Publicar un comentario