¿Qué es WebVTT?

WebVTT (Web Video Text Tracks Format) es un formato de subtítulos basado en texto que se utiliza para añadir pistas de texto sincronizado a los videos. Es el formato oficial soportado por HTML5 a través del elemento <track>, lo que permite añadir:

• Subtítulos (texto traducido del habla)
• Captions (habla y efectos de sonido)
• Descripciones (información visual para lectores de pantalla)
• Capítulos (puntos navegables en el video)
• Metadatos

Estructura básica de WebVTT

• Un archivo WebVTT consta de:
  • Un encabezado opcional (WEBVTT).
  • Metadatos opcionales (comentarios o bloques de estilo/script).
  • Cues (segmentos de texto con temporización y contenido).

1. Formato de cue

Un cue tiene la siguiente estructura:

[HH:]MM:SS.mmm --> [HH:]MM:SS.mmm [configuración del cue]
Contenido del texto...

• Temporización: Horas, minutos, segundos y milisegundos en formato HH:MM:SS.mmm.
• Configuraciones (opcional):
  • vertical (lr/rl para texto vertical)
  • line (posicionamiento)
  • position (alineación horizontal)
  • size (ancho/porcentaje)
  • align (start/middle/end)

2. Contenido del cue

• Puede ser texto plano o incluir marcado:
  • Etiquetas: <b>, <i>, <u>, <ruby>, <lang>, etc.
  • Marcas de tiempo (<00:00:05.000>) para texto estilo karaoke.

3. Estilos y CSS

• Los estilos pueden aplicarse mediante:
  • Cues en línea (usando etiquetas).
  • Pseudo‑elementos CSS (::cue, ::cue-region) en HTML.

4. Pistas de metadatos

• WebVTT puede transportar metadatos (JSON, etc.) para aplicaciones interactivas.

5. Codificación del archivo

• Debe estar codificado en UTF-8.
• Las líneas terminan con \r\n, \n o \r.

6. Reglas de procesamiento

• Los analizadores deben manejar archivos mal formados de forma tolerante.
• La BOM (Byte Order Mark) es opcional.

7. Integración con HTML5

• Se usa con el elemento <track>:

  <video>
    <track src="subtitles.vtt" kind="subtitles" srclang="en" default>
  </video>
  

  • kind puede ser subtitles, captions, descriptions, chapters o metadata.

8. Compatibilidad con navegadores

• Ampliamente soportado en navegadores modernos (Chrome, Firefox, Safari, Edge).

9. Casos de uso

• Subtítulos/Captions para accesibilidad.
• Letras de karaoke con texto sincronizado.
• Navegación por capítulos en videos.
• Metadatos para aplicaciones de video interactivas.

Ejemplo de un archivo WebVTT:

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to our tutorial on WebVTT.

00:00:04.000 --> 00:00:08.000
In this video, you'll learn how to add subtitles to your HTML5 videos.

Los motores de búsqueda no pueden “ver” tu video, pero sí pueden leer contenido basado en texto. Al usar archivos WebVTT, añades texto indexable que:

• Mejora la descubribilidad: Google puede indexar captions y transcripciones, haciendo que tus videos aparezcan en más resultados de búsqueda.
• Aumenta la interacción: Los videos subtitulados mantienen a los usuarios más tiempo, incrementando la duración de la sesión y reduciendo la tasa de rebote.
• Potencia la accesibilidad: Los captions son esenciales para usuarios sordos o con dificultades auditivas, y son favorecidos por los algoritmos de SEO.

Cuando un archivo WebVTT está asociado a un video en una página web, Google puede analizar y comprender ese texto sincronizado, haciendo que el contenido sea más relevante para ciertas consultas.

Cómo añadir WebVTT a un video HTML5

Puedes incluir un archivo WebVTT en tu video usando el elemento <track>:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

• src: Ruta a tu archivo .vtt
• kind: Tipo de pista de texto (subtitles, captions, chapters, etc.)
• srclang: Código de idioma (p. ej., en, es)
• label: Etiqueta de la pista que se muestra en el reproductor

WebVTT vs SRT: ¿Cuál es la diferencia?

Herramientas para crear y editar archivos WebVTT

Puedes crear o editar archivos .vtt con:

• Editores de texto: VS Code, Sublime Text
• Editores de subtítulos: Subtitle Edit, Amara, Aegisub
• Convertidores: Usa herramientas para convertir SRT a VTT y viceversa

¿Cómo abrir un archivo WebVTT?

Para abrir un archivo WebVTT (.vtt), puedes usar cualquier editor de texto o editor de subtítulos.

Abrir en un editor de texto

• Windows: Notepad, Notepad++, VS Code
• macOS: TextEdit, Sublime Text
• Linux: Gedit, nano, Vim

Como los archivos .vtt son texto plano, puedes verlos y editarlos como cualquier archivo de texto regular.

Abrir en un editor de subtítulos

Para obtener mejor formato, vista previa y sincronización:

• Subtitle Edit (Windows)
• Aegisub (multiplataforma)
• Amara (basado en web)

Abrir en un navegador

1. Crea un archivo HTML sencillo con una etiqueta <video> y una etiqueta <track>.
2. Abre el archivo HTML en un navegador para ver el video con subtítulos.

Características clave de los archivos ASS

Preguntas frecuentes

P1: ¿Cuál es la diferencia entre WebVTT y SRT?

R: WebVTT se basa en SRT pero añade funciones cruciales como posicionamiento de texto, etiquetas de voz, estilos CSS y soporte de metadatos, además de la integración nativa con video HTML5.

P2: ¿Cómo añado subtítulos WebVTT a YouTube?

R: Sube tu archivo .vtt al añadir subtítulos a tu video, o usa el caption automático de YouTube y descarga el archivo WebVTT generado para editarlo.

P3: ¿Pueden los archivos WebVTT incluir imágenes?

R: La especificación WebVTT no soporta imágenes incrustadas directamente, pero puedes usar cues de metadatos con URLs e implementar la renderización de imágenes mediante JavaScript personalizado.

P4: ¿Por qué no se aplican mis estilos WebVTT?

R: Verifica que los bloques STYLE aparezcan antes del primer cue, que no contengan líneas en blanco y que uses correctamente el pseudo‑elemento ::cue. También comprueba la compatibilidad del navegador.

P5: ¿Funcionan los archivos WebVTT con protocolos de streaming como HLS?

R: Sí, HLS (HTTP Live Streaming) admite WebVTT segmentado para transmitir captions de forma eficiente junto con el contenido de video.

Referencias

• WebVTT: The Web Video Text Tracks Format