WebVTT y el formato de archivos de subtítulos

WebVTTDesde 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 <track> 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

Cargar archivo como subtítulo

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

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

By Brocken Inaglory [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons

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>

By Brocken Inaglory [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons

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

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.