Desde que los navegadores soportan HTML5 es posible colocar videos en una página web sin necesidad de utilizar plugins adicionales.

Estos videos pueden estar cargados en nuestro servidor sin necesidad de cargarlo en un servicio externo  como YouTube o Vimeo permitiendo más libertad  de diseño y control de contenido.

 Ahora veremos como agregar subtítulos utilizando WebVTT.

¿Qué es WebVTT?

WebVTT (Web Video Text Tracks) es el estandar de W3C para la creación de texto sincronizado para el elemento de HTML5. Provee captions, subtítulos para el contenido de videos, descripciones de texto de videos, capítulos y metadatos sincronizados en general tanto para archivos de video como de audio.

Formato de un archivo  WebVTT

Al crear el archivo a primera linea de texto debe tener la palabra WEBVTT y a continuación una linea en blanco.

Luego cada linea de texto debe componerse de:

• Un encabezado que puede ser un número o un texto: Generalmente se utiliza un número entero que indica el número de linea de texto
• Una linea donde se especificará el tiempo inicial y final donde se mostrará el texto junto con configuraciones opcionales con el formato tiempo_inicio –> tiempo fin[configuraciones] donde el tiempo se escribirá con el formato hh:mm:ss.mmm o mm:ss.mmm.
• Una linea con el texto a mostrar
• Una linea en blanco

WEBVTT

1
00:00:01.000 --> 00:00:05.000
Esta es la primera linea 

2
00:00:05.000 -->
00:00:10.000 Esta es la segunda linea

Cargar archivo como subtítulo

Para cargar un archivo como subtítulo de un video utilizamos la etiqueta track.

<video width="400" height="400" controls> 
   <source src="nombrevideo.mp4" type="video/mp4" />
   <track src="subtitulo.vtt" kind="subtitles" srclang="es" label="Español" />
</video>

La etiqueta track  debe tener los siguientes atributos:

• label: Nombre con que el que el archivo aparecerá en la lista de opciones
• src: Ubicación del archivo
• srclang: Lenguaje del archivo de subtítulo
• kind: Tipo de archivo WebVTT . Dentro los tipos de archivos podemos elegir según el caso:
  • Captions: Utilizada para personas con discapacidades auditivas donde se muestra el texto, el nombre de el personaje que está hablando si se encuentra fuera de pantalla y los efectos de sonido
  • Subtítulos: Traducciónes del idioma original del texto
  • Chapters. Títulos de los capítulos del video
  • Descriptions: Utilizada para personas con discapacidades visuales que cuenta con una descripción de lo que ocurre en el video
  • Metadata: Contenidos no visibles para el usuario y usados en scripts

Para poder observar el subtítulo seleccionarlo desde los controles del reproductor de video.

BTBD Media | Brian Sullivan / CC BY-SA

Estilos

El estandar permite agregar estilos simples y con CSS a las lineas de texto aunque por el momento solo algunos son soportados por los navegadores.

• Voz: <v nombre> Define el nombre de la persona cuya voz se escucha
• Clase CSS : <c.nombreclase>Texto </c> Permite dar estilo con CSS (No soportado todavía)
• Negrita: <b>Texto</b>
• Cursiva: <i>Texto</i>
• Subrayado: <u>Texto</u>

WEBVTT

1
00:00:01.000 --> 00:00:03.000
Esta es una linea con <b>texto en negrita</b>

2
00:00:03.000 --> 00:00:06.000
Esta es una linea con <i>texto en cursiva</i>

3
00:00:06.000 --> 00:00:09.000
Esta es una linea con <u>texto subrayado</u>

Para poder observar el subtítulo seleccionarlo desde los controles del reproductor de video.

BTBD Media | Brian Sullivan / CC BY-SA

Posición del texto

Es posible definir la posición y dirección del texto colocando una de las siguientes opciones:

• D:vertical Texto vertical
• D:vertical-lr Texto vertical hacia la derecha
• L:200 Número de linea en la que empezará el texto
• L:50% Porcentaje de la posición vertical del texto desde arriba
• T:30% Posición del texto horizontalmente en porcenaje
• A:start Alineación de texto a la izquierda
• A:middle Alineación de texto centrado
• A:end Alineación de texto a la derecha
• S:40% Ancho que debe ocupar el texto en porcentaje

WEBVTT

1
00:00:01.000 --> 00:00:03.000 A:middle T:50%
Esta es una linea con texto

2
00:00:03.000 --> 00:00:06.000 A:middle T:0%
Esta es una linea con texto

3
00:00:06.000 --> 00:00:09.000 A:middle T:100%
Esta es una linea con texto

4
00:00:09.000 --> 00:00:12.000 A:end D:vertical
Esta es una linea con texto

5
00:00:12.000 --> 00:00:15.000 A:end D:vertical-lr
Esta es una linea con texto

6
00:00:15.000 --> 00:00:18.000 A:start T:100% L:100%
Esta es una linea con texto

7
00:00:18.000 --> 00:00:21.000 A:start T:100% L:50%
Esta es una linea con texto

8
00:00:21.000 --> 00:00:24.000 A:start T:100% L:0%
Esta es una linea con texto

Soporte

Aunque el estandar WebVTT no es soportado completamente en los navegadores ya es posible utilizarse para la creación de subtítulos simples. Los elementos de estilo sin embargo aun no están soportados por lo cual no se puede modificar los colores, posición y tamaños del subtítulo. Para conocer todas las futuras características pueden visitar el borrador de W3C.