Subtítulos en los vídeos en HTML5

Hace unos días escribí el artículo Accesibilidad de los vídeos en HTML5 en el que comentaba que la nueva etiqueta <video> de HTML5 no contempla por ahora la posibilidad de incluir subtítulos de forma nativa, por lo que los vídeos en HTML5, aunque se mejora el control por medio del teclado, seguirán teniendo problemas de accesibilidad.

Un lector de este blog (¡muchas gracias!) ha dejado el siguiente comentario en dicho artículo:

Si bien no es la solución definitiva, la gente de Opera explica cómo crear subtitulados para videos HTML5 con JavaScript (solo funciona en algunos navegadores):

http://dev.opera.com/articles/view/accessible-html5-video-with-javascripted-captions/

El artículo al que hace referencia el lector, Accessible HTML5 Video with JavaScripted captions, explica una técnica que permite sincronizar la visualización de subtítulos con el vídeo. Básicamente la técnica consiste en:

1. Incluir en la página web que contiene el vídeo los subtítulos en un <div> que se superpone al vídeo.
2. Cada subtítulo esta etiquetado con un <span> que contiene las marcas de tiempo en las que se debe mostrar (para la marcas de tiempo se emplea una nueva posibilidad de HTML5 llamada custom data- attributes).
3. Desde JavaScript, mediante el evento ontimeupdate, que se ejecuta cada cierto tiempo cuando el vídeo se está reproduciendo, y mediante la propiedad currentTime, que indica el tiempo de reproducción actual del vídeo, se muestra el subtítulo adecuado (mediante CSS se oculta o se visualiza el subtítulo).

Sin embargo, lo más interesante es lo que podemos leer al principio del artículo, una nota añadida hace tres meses, el 22/09/2011:

NOTE, September 22nd 2011: There is a new and shiny way to add subtitles to HTML5 video using the new <track> element, but this isn't yet implemented. The hacky technique discussed below works now, but it isn't the "right" way to do it.

Afortunadamente, parece que ya se ha planteado la solución al problema de los subtítulos con la incorporación de una nueva etiqueta llama <track>. Recordemos que HTML5 por ahora es un trabajo en progreso, que el W3C ha fijado que se terminará en el año 2014, aunque para el WHATWG (los que comenzaron el desarrollo de HTML5), nunca estará terminado.

La etiqueta <track> posee el atributo src que permite indicar un fichero externo que contiene los subtítulos (con sus correspondientes marcas temporales). El formato propuesto para los subtítulos se llama WebVTT (Web Video Text Tracks) y es un formato similar a SUB o SRT.

Desgraciadamente, parece que por ahora ningún navegador soporta esta nueva etiqueta, pero dentro de poco podremos hacer cosas como lo siguiente:
<video src="brave.webm">
 <track kind=subtitles src=brave.en.vtt srclang=en label="English">
 <track kind=captions src=brave.en.vtt srclang=en label="English for the Hard of Hearing">
 <track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Français">
 <track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch">
</video>