WebVTT es el formato de subtítulos que entienden los navegadores. Es el único que entienden: si le pones un SRT a un vídeo de HTML5, no pasa nada de nada. Ni error, ni aviso, ni subtítulos.
La extensión es .vtt y, por dentro, se parece muchísimo a un SRT. Lo que cambia son tres cosas: una cabecera obligatoria, un punto donde el SRT pone una coma, y la posibilidad de decir mucho más de lo que un SRT sabe decir.
Qué hay dentro
WEBVTT
1
00:00:04.120 --> 00:00:06.480
Vamos a repasar dónde estamos
antes de entrar en detalles.
2
00:00:06.600 --> 00:00:09.000 line:90% align:start
El dato que más me sorprendió
fue la caída de la segunda semana.
La primera línea tiene que ser WEBVTT. Si falta, si va precedida de una marca de orden de bytes o si hay una línea en blanco antes, el navegador descarta el archivo entero.
Después, los mismos bloques de siempre. Con dos diferencias que se ven a simple vista: los milisegundos van detrás de un punto, y detrás del tiempo puede haber ajustes.
Lo que añade sobre un SRT
Posición y alineación. line:90% baja el subtítulo, align:start lo pega a la izquierda, position:20% lo mueve de lado. Sirve para no tapar un rótulo que ya está en la imagen.
Estilos. Un bloque STYLE con CSS de verdad al principio del archivo, y clases dentro del texto con <c.narrador>. Colores, tamaños, sombras.
Quién habla. La etiqueta <v Marta>Buenos días</v> marca la voz. Los reproductores que la entienden la pueden pintar de otro color; los que no, la ignoran. En una entrevista o una reunión es la diferencia entre un muro de texto y algo que se lee.
Notas y regiones. Bloques NOTE para comentarios que no se ven, y REGION para definir zonas de la pantalla con desplazamiento propio, como los subtítulos que suben en directo.
Nombres de subtítulo. Cada bloque puede llevar un identificador en la línea de encima del tiempo —intro, pregunta-3— para poder apuntar a él desde JavaScript.
Cuándo necesitas un VTT
Siempre que el vídeo se vea dentro de un navegador. Si tu página tiene un <video> con un <track>, el archivo tiene que ser WebVTT:
<video controls>
<source src="reunion.mp4" type="video/mp4" />
<track src="reunion.vtt" kind="subtitles" srclang="es" label="Español" default />
</video>
Lo mismo para los reproductores web modernos (Video.js, Plyr, Shaka) y para el streaming en HLS, que mete los subtítulos como segmentos WebVTT.
Fuera del navegador, casi nadie lo pide: los editores de escritorio, los reproductores de toda la vida y la mayoría de formularios de subida siguen esperando un SRT.
Dos cosas que se rompen y no son culpa del archivo
El servidor tiene que mandarlo como text/vtt. Si lo sirve como text/plain o como application/octet-stream, hay navegadores que lo descartan. Se arregla en la configuración del servidor, no en el archivo.
Y tiene que ser del mismo origen, o traer CORS. Un .vtt en otro dominio sin la cabecera Access-Control-Allow-Origin no carga, aunque la URL funcione perfectamente si la abres a mano. Es la causa número uno de «el vídeo va pero los subtítulos no».
Las dos son de configuración y ninguna da un error visible en la página. Se ven en la pestaña de red de las herramientas del navegador, y solo si sabes que hay que mirar ahí.
Convertirlo
De SRT a VTT es directo: cabecera, punto en vez de coma y escapar los & y los < que el SRT lleva como texto y WebVTT leería como marcado. Nuestro conversor de SRT a VTT hace las tres cosas en tu navegador, sin subir el archivo.
Al revés se pierde lo que un SRT no sabe expresar —posición, estilos, regiones—, así que el conversor de VTT a SRT los descarta y convierte las etiquetas de voz en un «Marta:» delante de la línea, que es lo que un SRT sí puede enseñar. Cuál elegir en cada caso.
Si lo que tienes es el vídeo y no los subtítulos
Súbelo y te devolvemos la transcripción con marcas de tiempo, los hablantes separados y con nombre, y un resumen. De ahí sale el VTT ya hecho, con las voces marcadas. Los primeros 45 segundos no piden cuenta.