El tag <video /> del nuevo estándar HTML5 cada día nos sorprende más y es que aunque se detectaron problemas a la hora de interpretar el estandar en los diferentes navegadores, cada nueva noticia sobre él aporta una idea interesante.
Bruce Lawson, gurú de HTML5, nos ofrece una interesante implementación que nos ofrece subtítulos a nuestros videos mediante Javascript.
HTML
La principal ventaja que nos ofrece esta técnica es que nos permite tener elementos HTML con el texto del video en nuestra página, que aunque nos hará páginas más largas y pesadas, nos permite ofrecer a usuarios sin capacidad de reproducir videos una solución alternativa (aunque no completa) de saber de que vá el video.
<video width=600 src="leverage-a-synergy.ogv" ontimeupdate="timeupdate()"
style="background:black" autobuffer controls>
<p>This page is to demonstrate open HTML5 video, so if you're not using a
browser that can display the open Ogg Theora codec, there's not much to see. Sorry!</p>
</video>
<div id="transcript">
<h3>Transcript</h3>
<p>
<span data-begin=1 data-end=6>Hi, my name's Dr Archimedes Einstein and I'm a Doctor of Science at the University of Science</span>
<span data-begin=6 data-end=9>in a very famous town that you're too stupid to have heard of.</span>
<span data-begin=9.5 data-end=11.5>Anyway, today we're going to talk about "synergies".</span>
<span data-begin=12 data-end=15>A lot of people are worried about synergies, but I can tell you that</span>
<!-- ... -->
</p>
</div>
Como podemos ver, se trata de una estructura bastante lógica, un video y una serie de líneas con el texto que compone la transcripción de dicho video. Hay que destacar la función timeupdate() que se ejecutará en el evento ontimeupdate del elemento <video /> (que vemos en negrita), ya que es la encargada de hacer mágia y convertir ese texto en los subtítulos del video.
Por otro lado, en el texto podemos ver que los <span /> ofrecen información sobre cuando deben empezar y terminar cada línea, vinculando los data-begin y data-end al tiempo de reproducción del video medianante los atributos data disponibles en el estandar.
Javascript
Ahora necesitamos que el texto y el video se entrelazen y ofrezcan el resultado que estamos buscando, para ello primero hemos de cargarlo y posteriormente ir actualizando el texto a medida que el video va reproduciendose.
var captions = [];
window.onload = function() {
var caption = document.createElement('div');
caption.id = 'caption';
// Cargamos el primer elemento
var ref = document.getElementsByTagName('video')[0];
ref.parentNode.insertBefore(caption, ref.nextSibling);
// Cargamos todos los subtítulos
var nodes = document.querySelectorAll('#transcript span');
for (var i = 0; i < nodes.length; i++) {
// Generamos un objeto con la información de cada línea
var c = {'start': parseFloat(nodes[i].getAttribute('data-begin')),
'end': parseFloat(nodes[i].getAttribute('data-end')),
'text': nodes[i].textContent};
captions.push(c);
}
}
// Función que actualizar el texto dependiendo del tiempo
function timeupdate() {
var v = document.querySelector('video');
var now = v.currentTime;
var text = "";
for (var i = 0; i < captions.length; i++) {
if (now >= captions[i].start && now <= captions[i].end)
{
text = captions[i].text;
break;
}
}
document.getElementById('caption').innerHTML = text;
}
// Ocultamos los subtítulos
document.write('<style>#transcript{display:none}</style>');
Al terminar de cargar la página, recogemos los textos y los almacenamos en una variable global en un formato más cómodo para trabajar con él. En la función timeupdate(), que recordemos usamos en el evento ontimeupdate del tag <video /> nos irá comprobando los cambios y actualizando el mensaje visible a medida que va transcurriendo el tiempo de reproducción.
Para terminar, ocultamos el texto mediante Javascript ya que en caso de no estar disponible, además de no aplicar ninguna de las funcionalidades anteriores nos permitirá visualizar el texto perfectamente.
CSS
Los estilos nos permiten ubicar los subtítulos en el video, y además podremos especificar el tamaño, color y fuente de ellos.
#caption {
position: absolute;
width: 100%;
bottom: 0;
bottom:30px; /* space for the video controls */
left: 0;
text-align: center;
font-family: sans-serif;
font-weight: bold;
color: white;
text-shadow: black 1px 1px 3px;
padding-bottom: .5em;
}
#transcript span {display:table-row;}
Básicamente, lo que estamos haciendo es ubicar el texto al pie del video, dejando espacio para los controles.
Bruce, además incluye unos estilos que nos inserta información extra para ciertos usuarios al mostrar mediante CSS información del tiempo de inicio y fin de los textos leyendo directamente de los atributos.
#transcript [data-begin]:before{
content: " [" attr(data-begin) "s-" attr(data-end)"s] ";
font-size:80%;
display:table-cell;
padding-right:1em;
}
Resultado
(Ver Imagen)
El resultado es realmente sorprendente ya que no tiene nada que envidiarle (a este nivel) a los reproductores de escritorio.
Actualización (17:00)
Nukeador me muestra otro sistema, también basado en Javascript que además de permitir conseguir el mismo efecto nos permitirá usar los ficheros .srt que tenemos disponibles por Internet.
(Ver Imagen)
Un sistema basado en la lectura mediante Ajax de ficheros .srt (SubRip) y de un posterior parseo para obtener el tiempo y el texto que mostraremos como subtítulo.
Fichero srt
Si alguna vez has necesitado ver una película con subtítulos, te habrás encontrado con que has tenido que descargar un fichero .srt para poder verla. Eso es por que existen una gran cantidad de herramientas que permiten la edición de subtítulos fácilmente con la obtención de este tipo de ficheros. Además, es soportado por la mayoría de todos los reproductores multimédia.
...
5
00:00:07,100 --> 00:00:09,000
Tiene subtitulos son en Español
6
00:00:09,100 --> 00:00:10,500
Gracias a las nuevas technologias
7
00:00:10,500 --> 00:00:20,000
<img src="foo.png"/><img src="foo.png"/><img src="foo.png"/> Gracias! <img src="foo.png"/><img src="foo.png"/><img src="foo.png"/>
....
El formato de un fichero .srt nos permite generar estructuras como las que vemos. Como podemos ver, se trata de un sistema muy cómodo y a mi entender más correcto que el presentado por Bruce.
, hay gente que se ha currado cosas más chulas), desde dibujar a mano alzada hasta la inclusión de imágenes externas, pasando por la herramienta de texto, la degeneración de polígonos o la inclusión de capas.
