Crear subtítulos VTT para mostrarlos en videos con HTML5

Crear archivos de subtítulos VTT o SRT para agregarlos las opciones de subtítulos multi idiomas a nuestros videos.


Publicado: Editado: Estado:

Hago mención de subtítulos VTT o SRT porque en realidad son prácticamente los mismos. De hecho, si tienes subtítulos SRT y los quieres mostrar en el navegador como HTML5 solamente es necesario cambiar la extensión .srt por .vtt y agregar una línea que identifica que se trata de un archivo WebVTT. Puedes leer un poco de historia y definiciones en este enlace.

Para crearlos solamente necesitamos un editor de texto cualquiera, por ejemplo Bloc de Notas, Notepad++, Sublime Text o Brackets, y guardamos el archivo como con extensión .vtt (por ejemplo english.vtt).

La estructura a seguir en el archivo de texto es la siguiente:

WEBVTT

[Indicador (número o etiqueta de texto)]
[hh:]mm:ss.sss --> [hh:]mm:ss.sss
Texto del subtítulo

Se debe iniciar poniendo WEBVTT en la primera línea para indicar que se trata de subtítulos VTT. La segunda línea debe quedar en blanco (es importante para que funcione). Luego, los tiempos y textos de los subtítulos se agregan escribiendo un indicador que puede ser numérico o una cadena de texto. También es necesario una línea en blanco entre cada intervalo de Etiqueta/Tiempo/Subtítulo.

El formato a seguir en los tiempos es el valor inicial hora:minuto:segundo:milisegundo y de igual forma el valor final escribiendo entre ellos el indicador de intervalos -->. Un ejemplo sería el siguiente:

WEBVTT

1
00:00:00.000 --> 00:00:04.870
Politecnia.net es una plataforma para compartir información

2
00:00:06.010 --> 00:00:07.870
de carácter educativo y que fortalezcan nuestros conocimientos

3
00:00:09.720 --> 00:00:10.480
sobre una determinada área de estudio.

4
00:00:10.680 --> 00:00:11.730
Visítanos, registrate,

5
00:00:11.920 --> 00:00:13.530
Comparte!!!

Es bastante sencillo, pero definitivamente lleva mucho tiempo crearlos y controlar de forma eficiente los tiempos. Además si a este tipo de archivos le cambias la extensión por .srt podrás ver que también te sirven para verlos en la PC en el reproductor multimedia, por ejemplo el VLC.

Tambièn puedes ver esta publicación acerca sobre cómo visualizar los subtítulos con videos en HTML5.

Bibliografía

Microsoft MSDN

Dar puntos de agradecimiento
Reportar esta publicación

Déjanos tu comentario

Comentarios

SirOne

(Administrador)

Intereses

Café (elixir de dioses), música, programación, diseño, "El lado oscuro de la luna", The Big Bang Theory, iZombie.

Puntos: 174 Votos: 126