HTML5: Videos con subtitulos WebVTT
Gracias a HTML5 podemos empezar a incluir videos en nuestra web sin tener que usar Plugins; y a pesar de ciertos problemas con algunos codecs podemos decir que hasta la fecha el tema se encuentra estable. Pero solo poder reproducir videos en una web no nos lleva a nada sino podemos agregar ciertos condimentos que mejoren la interacción y la comunicación con el usuario. Es por ello que necesitamos alguna forma de expresarnos a través de un video y lo primero que se nos viene a la mente son los subtítulos. Necesitamos incluirlos en cualquier video y además debería ser una tarea sencilla para continuar con la filosofía que nos trae HTML5. Además también podemos pensar en exponer cierta información del video al usuario para que este sepa a que sección del mismo dirigirse para mostrarle algo en específico. Para llevar todo esto adelante se está trabajando en una nueva especificación llamada WebVTT (Web Video Text Tracks).
Archivos WebVTT
Los archivos WebVTT (.vtt)son archivos de texto planos que contienen diferentes tipos de información sobre el video:
- Subtítulos: La transcripción o traducción del dialogo.
- Captions: Son similares a los subtítulos pero pueden incluir información de audio
- Descripciones: Destinado a ser un archivo de texto independiente que describe el video a través de un lector de pantalla.
- Capítulos: Destinado a ayudar al usuario a navegar a través del video
- Metadata: Información y contenido sobre el video, que no está destinada por default a ser visualizada por el usuario, aunque es posible realizarlo mediante Javascript.
Creando un archivo WebVTT
Todo lo que tenemos que hacer para crear un archivo WebVTT es solamente abrir un editor de texto, tipear WebVTT como la primer línea de este y grabarlo con la extensión .vtt. También tenemos la opción de utilizar herramientas como Universal subtitles.
Conectando nuestro archivo .vtt a un video
Una vez que tenemos escrito lo más básico de un archivo .vtt vamos a conectarlo en nuestra página HTML. Esto lo hacemos a través del elemento <track> que lo encontramos dentro del elemento <video>.
Elemento <track>
El elemento <track>tiene los siguientes atributos:
- src = archivo WebVTT
- srclang = lenguaje de la pista
- etiqueta(label) que pueda ser leida por el usuario
- que especie(kind) de pista es. Los valores del atributo kind vienen de la lista anteriormente sitada(subtitulos, captions, etc).
En el siguiente ejemplo, vamos a usar el elemento <track> para los subtítulos:
<video width="640" height="480" controls> <source src="video.mp4" type="video/mp4" /> <source src="video.webm" type="video/webm" /> <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English" /> <!-- fallback --> </video>
Debemos tener en cuenta las siguientes consideraciones:
- Si kind no está especificado el valor por defecto es “subtítulos”
- Si kind tiene como valor subtítulos, entonces srclang es requerido
- No deberían existir dos tracks del mismo kind con el mismo label
En el ejemplo anterior tenemos un elemento <track> pero debemos saber que podemos tener muchos mas. Eso se puede dar en el caso donde tengamos los mismos subtítulos pero en distintos idiomas.
Agregando contenido al archivo WebVTT
Una vez que hemos creado el archivo .vtt y lo hemos linkeado en el documento HTML, debemos agregarle contenido. Para ello agregaremos los “cues”. Un archivo .vtt puede tener muchos cues. Cada uno comienza con un ID, seguido por un rango de tiempo y también por un texto. Cada cue es separado por una línea en blanco.
Ejemplo de .vtt
1 00:00:01.000 --> 00:00:10.000 Esta es la primer linea del texto, apareciendo entre 1-10 segundos 2 00:00:15.000 --> 00:00:20.000 y la segunda linea de texto separada en dos lineas
En el ejemplo anterior tenemos dos cues. El tiempo debe tener el siguiente formato: hh:mm:ss.mmm . En nuestro ejemplo, el tiempo ocurre dentro de los primeros 20 segundos. El segundo cue divide al texto en dos líneas automáticamente.
Aplicando estilos
El ejemplo anterior nos da la pauta de la mínima configuración que necesitamos para el subtitulado. Una mejora que podemos agregar es el estilo. Empezaremos con las opciones de los cue que son realizadas en la misma línea de las opciones del tiempo:
D:vertical / D:vertical-lr :La dirección del texto es vertical en vez de horizontal. Tambien especifica si el texto crece a la izquierda (vertical) o hacia la derecha (vertical-lr)
L:X / L:X%: Puede ser un número o un porcentaje. Si es un porcentaje, entonces es la posición desde el la parte superior (top) del frame. Si es un número, representa que número de línea será.
T:X%: La posición del texto horizontal del video. T100% ubicará el texto en el lado derecho del video.
A:start / A:middle / A:end : La alineación del texto dentro de su caja. Start es alineación izquierda, middle es céntrica y end es derecha.
S:X%: El ancho de la caja de texto como un porcentaje del ancho del video. Para hacer uso de estos estilos debemos escribirlos en la misma línea que el tiempo:
00:00:01.000 --> 00:00:10.000 A:middle T:50% 00:00:01.000 --> 00:00:10.000 A:end D:vertical 00:00:01.000 --> 00:00:10.000 A:start T:100% L:0%
También podemos usar estilos para el texto:
Bold text: <b>Lorem ipsum</b>
Italic text: <i>dolor sit amet</i>
Underlined text: <u>consectetuer adipiscing</u>
Capítulos:
Podemos proveer una lista de capítulos para el video de la misma manera en la que lo hacemos con los subtítulos o captions. Empezamos con la misma declaración WebVTT y para cada cue, declaramos el número del capítulo y los tiempos de comienzo y fin y su título:
<track src="chapters.vtt" kind="chapters" srclang="en"/> Elemento <track> para establecer capítulos a un video
WEBVTT
Capítulo 00:00:01.000 –> 00:00:10.000> Introduccion a HTML5 Archivo WebVTT conteniendo marcadores de capítulos.
Soporte de navegadores
No todos los navegadores lo soportan, aunque la mayoría ya está trabajando en su implementación. Mientras tanto, tenemos algunos polyfills que nos permiten usarlos:
- js_videosub
- Playr
- MediaElementJs (no soporta estilos)
Demo:
Aquí puedes ver una demo. Son solo los primeros 10 segundos.
Esto ha sido todo el Tutorial HTML5 en Español: HTML5 videos con subtitulos WebVTT. Dejanos tus comentarios y tus experiencias con formatos WebVTT.
Artículos Relacionados:
- Tutorial HTML5 en Español: Detectar compatibilidades HTML5 usando Modernizr
- Tutorial HTML5 en Español: Drag and Drop y subida automática en el servidor
- Tutorial HTML5 en Español: HTML5 con formato de revista/mágazine
- Tutorial HTML5 en Español: Ejemplo Práctico Trabajando Offline
- Tutorial HTML5 en Español: Ejemplos Prácticos de HTML5 Canvas
