WebVTT: Guía Completa de Pistas de Texto para Vídeo Web
Cuando ves un vídeo en YouTube, Netflix o cualquier sitio web moderno y activas los subtítulos, el texto que ves casi con certeza se entrega en formato WebVTT. WebVTT (Web Video Text Tracks) es el estándar W3C para subtítulos y leyendas web, diseñado desde cero para integrarse con el elemento HTML5 <video> y la API <track>.
¿Qué es WebVTT?
WebVTT (extensión .vtt) es un formato de texto plano para pistas de texto temporizadas asociadas con vídeo HTML5. Gestiona:
- Subtítulos: diálogo transcrito para espectadores que pueden escuchar el audio
- Leyendas: subtítulos más efectos de sonido e identificación de hablante para espectadores sordos/con problemas de audición
- Capítulos: marcadores de navegación mostrados como menú de capítulos
- Descripciones: descripciones de texto del contenido del vídeo para lectores de pantalla
- Metadatos: datos clave-valor arbitrarios que JavaScript puede leer en marcas de tiempo específicas
Un archivo WebVTT mínimo:
WEBVTT
00:00:00.000 --> 00:00:04.000
Hola, bienvenido a este vídeo.
00:00:04.500 --> 00:00:09.000
Hoy vamos a aprender sobre formatos de subtítulos.
00:00:09.500 --> 00:00:14.000
WebVTT es el estándar moderno para leyendas web.
Posicionamiento y Estilo de Señales
Aquí es donde WebVTT supera significativamente a SRT:
Configuración de Posición
00:00:01.000 --> 00:00:04.000 position:10% align:left
Este texto aparece en el lado izquierdo de la pantalla.
00:00:05.000 --> 00:00:08.000 position:50% align:center line:90%
Este texto aparece cerca de la parte inferior central.
Configuraciones disponibles:
position:X%— posición horizontal (0% = izquierda, 100% = derecha)align:left|center|right— alineación del texto dentro del cuadro de señalline:X%— posición vertical
Estilo en Línea con Etiquetas VTT
00:00:01.000 --> 00:00:04.000
<b>Texto en negrita</b> y <i>texto en cursiva</i>
<c.amarillo>Texto de color amarillo</c>
<v Alice>Hola, soy Alice.
Estilo CSS mediante ::cue()
::cue {
color: white;
background-color: rgba(0, 0, 0, 0.8);
font-size: 1.2em;
}
::cue(b) {
color: yellow;
font-weight: bold;
}
Capítulos WebVTT
WEBVTT
capitulo-intro
00:00:00.000 --> 00:01:30.000
Introducción
capitulo-basico
00:01:30.000 --> 00:08:45.000
Conceptos Básicos
Uso de WebVTT en HTML5
<video controls>
<source src="video.mp4" type="video/mp4">
<track kind="captions" src="leyendas-es.vtt" srclang="es" label="Español" default>
<track kind="subtitles" src="subtitulos-en.vtt" srclang="en" label="English">
<track kind="chapters" src="capitulos.vtt" srclang="es">
</video>
WebVTT vs SRT
| Característica | SRT | WebVTT |
|---|---|---|
| Organismo estándar | Informal | W3C |
Soporte HTML5 <track> |
No | Sí |
| Posicionamiento de señales | No | Sí |
| Estilos en línea | No | Sí |
| Integración CSS | No | Sí |
| Marcadores de capítulos | No | Sí |
| Metadatos | No | Sí |
| Múltiples hablantes | No (solución alternativa) | Sí (etiquetas de voz) |
Conversión entre VTT y SRT
VTT → SRT
# Usando ffmpeg
ffmpeg -i entrada.vtt salida.srt
Reglas de conversión manual:
- Eliminar la línea de cabecera
WEBVTT - Cambiar el formato de marca de tiempo:
00:00:01.000→00:00:01,000(punto → coma) - Añadir números secuenciales antes de cada señal
- Eliminar cualquier etiqueta de posicionamiento y estilo VTT
SRT → VTT
ffmpeg -i entrada.srt salida.vtt
Crear VTT desde Transcripción con Whisper (IA)
pip install openai-whisper
whisper audio.mp3 --output_format vtt --language es
Accesibilidad y Cumplimiento WCAG
WebVTT es el formato requerido para el cumplimiento de accesibilidad WCAG 2.1 Nivel AA para vídeo web. El elemento <track kind="captions"> con un archivo VTT correctamente formateado satisface estos requisitos.
WebVTT es el formato de subtítulos de la web moderna. Su combinación de estandarización W3C, integración CSS, posicionamiento rico y soporte nativo HTML5 lo convierte en la elección correcta para cualquier contenido de vídeo entregado a través de un navegador.
Conversiones relacionadas
Conversiones frecuentes del catálogo: