Exportar (0) Imprimir
Expandir todo
Expandir Minimizar

Vídeo WebVTT. Una introducción a los subtítulos


©Jaime Peña Tresancos, 2013

Profesional independiente en el sector Servicios y tecnología de la información

Microsoft MVP

Twitter: @jpt219

LinkedIn: http://es.linkedin.com/pub/jaime-peña-tresancos/28/677/696



Hasta el momento la única solución para la subtitulación de vídeo en la Web era la inserción de éstos en el propio canal de vídeo o bien utilizar plug-ins externos para mostrar el vídeo y los subtítulos.

HTML5 nos proporciona la capacidad de ejecutar vídeo sin la necesidad de dichos plug-in externos y también ahora está en fase de desarrollo avanzado la etiqueta <track> para la inclusión de pistas de texto –y mucho más-, para la subtitulación, a ello dedicamos el presente artículo.

A modo de resumen, trataremos:

  • La etiqueta <track> de HTML5
  • El formato de archivo VTT
  • Gestión de subtítulos en múltiples idiomas
  • Temporalización de subtítulos
  • Subtítulos anidados
  • Subtitulado inline

Vídeo en HTML5 de partida

Para seguir este artículo suponemos de que se conoce lo esencial de la inserción de vídeos mediante HTML5; de cualquier manera, si no fuese así, podrá encontrarse la referencia oficial por parte del W3C, World Wide Web Consortium, en la dirección URL:

http://www.w3.org/wiki/HTML/Elements/video

Partiremos de un código mínimo como el mostrado en el Listado 1, que sin más nos muestra un vídeo en formato MP4, con todo el conjunto de controles de reproducción y visualización –volumen, pausa, …-.


<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Vídeo HTML 5</title>
</head>
<body>
    <h2>Vídeo HTML 5</h2>
    <video controls>
        <source src="blackhole.mp4" type="video/mp4">
    </video>
</body>
</html>

Dn175736.F44C00D1F399D57BB84DBEE088A3760D(es-es,MSDN.10).png


El WebVTT API

El formato WebVTT de Web Video Text Tracks Format, se encuentra aún en fase borrador –Working Draft- por parte del W3C y tiene por misión la inclusión de pistas de texto en los vídeos de páginas Web; muy similar al formato SRT utilizado para los subtítulos de películas en archivos de vídeo tipo DivX y otros.


NOTA:

Todo lo aquí expuesto es conforme con el borrador de 15 de abril de 2013.


Todo lo referente al estado actual de la especificación del formato WebVTT puede consultarse en la siguiente dirección URL, perteneciente al W3C:

http://dev.w3.org/html5/webvtt/

Dn175736.4ED760275463952B70A799C516925679(es-es,MSDN.10).png


La inserción de pistas de texto se basa en la inclusión de la etiqueta <track> de la forma:


<video>
<source …>
<track …>
</video>

Los atributos de la etiqueta <track> son:


Atributo

Descripción

src

Es el atributo HTML que apunta al archivo VTT que contiene los subtítulos u otros.

default

Si alguna pista de texto lo contiene, esa será la pista mostrada por defecto.

label

El título que identificará la pista de texto, por ejemplo en el menú de selección de subtítulos.

kind

Identifica el tipo de archivo VTT de que se trata:

captions: Títulos o leyendas, pueden contener además de textos, efectos de sonido y audio

chapters: Capítulos, indica que el recurso contenido en src contiene información para navegación en el vídeo

descriptions: Descripciones, indica que el contenido en src contiene texto que será mostrado cuando no esté disponible el componente de vídeo

metadata: Metadatos de diferente tipo, contenidos en src

subtitles: Subtítulos de texto

scrlang

Se trata del código del lenguaje del texto de los subtítulos.

Sólo se requiere si el archivo es de tipo subtitles.


En el Listado 2 se muestra un ejemplo sencillo de utilización, para la inclusión de subtítulos de un vídeo MP4, en el Listado 3 se muestra –antes lo comentaremos- el correspondiente archivo de subtítulos.


<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Vídeo WebVTT</title>
</head>
<body>
    <h2>Vídeo WebVTT</h2>
    <video controls>
        <source src="blackhole.mp4" type="video/mp4">
        <track label="Subtítulos en español" kind="subtitles" srclang="es"
         src="subtitles-es.vtt" default>
    </video>
</body>
</html>


El formato del archivo de pista de texto –subtítulos en formato VTT-, debe cumplir las siguientes condiciones:

  • El texto debe ser codificado como UTF-8
  • Una cabecera con el texto WEBVTT
  • Seguida de una línea en blanco
  • Un indicador de la pista –una especie de etiqueta-. Es opcional y será ignorado
  • Seguida de la referencia de tiempo inicial y final en el formato:

[hh:]mm:ss.sss --> [hh:]mm:ss.sss

  • Inmediatamente después vendría la línea con el texto

Resumiendo, un archivo sencillo sería de la forma:

WEBVTT
<espacio en blanco>
[Indicador o etiqueta]
[hh:]mm:ss.sss --> [hh:]mm:ss.sss
Texto del subtítulo

Listado 3: El correspondiente archivo de subtítulos VTT –subtitles-es.vtt-

WEBVTT

Cue-1
00:00:10.000 --> 00:00:25.000


Una estrella lejana es devorada por un agujero negro...


Dn175736.F03B8EBC8749FD8D83FB34A4AE468ACA(es-es,MSDN.10).png


Múltiples subtítulos

La inclusión de múltiples subtítulos es muy simple. Se trata de insertar repetidas etiquetas <track> con las referencias correspondientes.

En el Listado 4 se recoge un ejemplo de múltiples subtítulos, en español, inglés, francés y alemán, en el que se ha definido el primero como predeterminado. Para mostrar cualquiera de los otros, hemos de desplegar el menú de subtítulos del reproductor y seleccionarlo, como se puede observar en las figuras adjuntas.


<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Vídeo WebVTT</title>
</head>
<body>
    <h2>Vídeo WebVTT</h2>
    <video controls>
        <source src="blackhole.mp4" type="video/mp4">
        <track label="Subtítulos en español" kind="subtitles" srclang="es"
         src="subtitles-es.vtt" default>
        <track label="English subtitles" kind="subtitles" srclang="en"
         src="subtitles-en.vtt">
        <track label="Français sous-titres" kind="subtitles" srclang="fr"
         src="subtitles-fr.vtt">
        <track label="Deutsch Untertitel" kind="subtitles" srclang="de"
         src="subtitles-de.vtt">
    </video>
</body>
</html>

Dn175736.518747B6A091AC8255DA3010EBBA0E6B(es-es,MSDN.10).png

Dn175736.7BF369B812DC70BC5208731CF8A469AE(es-es,MSDN.10).png


Subtitulado multisección

Entendemos por ello el que será el modo habitual de subtitulado, crear diferentes secciones temporales, encada una de las cuales se mostrará un subtitulado diferente. Por ejemplo, notorio sería el caso de un diálogo o de un relato de un suceso temporal.

Habíamos visto en el apartado anterior el modo más simple de crear un archivo de subtítulos, ahora se trata de extenderlo de manera que cada sección temporal vaya separada de la anterior por una línea en blanco y contenga:

  • Un indicador de la pista –una especie de etiqueta-. Es opcional y será ignorado
  • Seguida de la referencia de tiempo inicial y final en el formato:

[hh:]mm:ss.sss --> [hh:]mm:ss.sss

  • Inmediatamente después vendría la línea con el texto

Y así sucesivamente, siempre con la línea en blanco por el medio.


WEBVTT
<espacio en blanco>
[Indicador o etiqueta]
[hh:]mm:ss.sss --> [hh:]mm:ss.sss
Texto del subtítulo
<espacio en blanco>
[Indicador o etiqueta]
[hh:]mm:ss.sss --> [hh:]mm:ss.sss
Texto del subtítulo
…

Como se observa en el Listado 5, hemos incluido tres secciones temporales, que se mostrarán entre los segundos 0 al 8, 8 al 15 y 15 al 25, sucesivamente.


Listado 5: Un archivo de subtítulos con múltiples secciones temporales


WEBVTT

Cue-1
00:00:00.000 --> 00:00:08.000
Una estrella lejana se acerca ...

Cue-2
00:00:08.000 --> 00:00:15.000
a un gran agujero negro ...

Cue-3
00:00:15.000 --> 00:00:25.000
y es totalmente devorada ...


Dn175736.E75AC3D9A0E2B7C2DA7B1B3ACCEAEE9D(es-es,MSDN.10).png

Dn175736.4507F50BBA3416F45223386501B58BAC(es-es,MSDN.10).png

Dn175736.D573318FBAEDAF2F1880BD4B991FCCEF(es-es,MSDN.10).png

Subtitulado anidado

También podremos hacer que los subtítulos se solapen temporalmente, que estén anidados, de manera que cuando otro aparezca, el anterior aun permanezca en pantalla.

Se trata simplemente de solapar los tiempos. Si nos fijamos en el Listado 6, el primer subtítulo se extiende desde cero a 25 segundos y los otros dos subtítulos aparecerán, el primero, desde el segundo 8 al 15 y desaparecerá y el segundo de 15 al 25, como se observa también en las figuras adjuntas.

Listado 6: Subtitulado múltiple y anidado


WEBVTT

Cue-1
00:00:00.000 --> 00:00:25.000
Una estrella lejana se acerca ...

Cue-2
00:00:08.000 --> 00:00:15.000
a un gran agujero negro ...

Cue-3
00:00:15.000 --> 00:00:25.000
y es totalmente devorada ...

Dn175736.E75AC3D9A0E2B7C2DA7B1B3ACCEAEE9D(es-es,MSDN.10).png

Dn175736.70C19074481EAC31714F6DFB22704D11(es-es,MSDN.10).png

Dn175736.BAB3E53D52B0EBF355AEDA143D570270(es-es,MSDN.10).png

Temporalización inline

La temporalización inline es una opción avanzada que, por el momento, no está plenamente soportada por ningún navegador, pero que tratamos ahora por su interés intrínseco.

Se trata de definir etiquetas temporales, con el formato <[hh:]mm:ss.sss>, intercaladas con el texto, de manera que vayan apareciendo sucesivamente como nuevas líneas de subtítulo a lo largo del tiempo.

Por ejemplo, en el Listado 7 ocurriría:

  1. En el segundo 1 se mostraría el texto: Una estrella lejana se acerca…
  2. En el segundo 8 se mostraría, en una segunda línea, el texto: a un gran agujero negro…
  3. En el segundo 15 desaparecería éste texto y sería reemplazado por: y es totalmente devorada…
  4. Este contenido se mantendría hasta el final de la reproducción, ya que se indica que los subtítulos abarcan hasta el segundo 25, que es el global del video

El Listado 8 es similar al Listado 7, pero presentando el subtítulo el multilínea, obsérvese que se trata de retornos de carro y no hay líneas en blanco entre las diversas líneas de un mismo subtítulo –muy importante-

Listado 7: Archivo de subtítulos inline


WEBVTT

Cue-1
00:00:00.000 --> 00:00:25.000
<00:00:01.000>Una estrella lejana se acerca ...<00:00:08.000> a un gran agujero negro ...<00:00:15.000> y es totalmente devorada ...

Listado 8: Modo alternativo al Listado 7, en multilínea


WEBVTT

Cue-1
00:00:00.000 --> 00:00:25.000
<00:00:01.000>Una estrella lejana se acerca ...
<00:00:08.000> a un gran agujero negro ...
<00:00:15.000> y es totalmente devorada ...

NOTA: La opción de presentar en multilínea los subtítulos es de aplicación general, no sólo de los inline y puede ser muy útil y cómoda para textos largos, por eso es especialmente aplicable aquí.


Validaciones de archivos VTT

Para garantizar que nuestros archivos VTT son coherentes con las normas estándar, es conveniente disponer de algún método de comprobación, afortunadamente ya se dispone de métodos automatizados –validadores-.

El validador recomendado por la fundación Mozilla es el Live WebVTT Validator, que se encuentra en la dirección URL:

http://quuz.org/webvtt/

Funciona de una forma bastante simple y manual, pero cumple su labor de forma muy rápida y eficiente. Bastará copiar el contenido de nuestro documento en el área correspondiente y ya se nos dará casi instantáneamente el resultado de la validación, en la parte inferior de la ventana.

Dn175736.2414E907CCB9285ADAAFF0D83C50062D(es-es,MSDN.10).png


Conclusiones

Hemos visto como a través de las etiquetas <video> y <track> resulta muy simple la inclusión de vídeo subtitulado a demanda en nuestras páginas Web. Teniendo la posibilidad de incluir múltiples pistas de texto en diferentes idiomas, que pueden ser seleccionadas por el usuario en tiempo de ejecución.

Esperamos que lo aquí expuesto les haya servido de ayuda en su trabajo y no dejen de preguntar cualquier duda que les pudiese surgir. Hasta la próxima, tengan unas provechosas sesiones de programación.



©Jaime Peña Tresancos, 2013

Twitter: @jpt219

LinkedIn: http://es.linkedin.com/pub/jaime-peña-tresancos/28/677/696es.linkedin.com/pub/jaime-peña-tresancos/28/677/696

Mostrar:
© 2014 Microsoft