Convertidor de Subtítulos SRT a VTT (SubRip a WebVTT)
Convierte un archivo de subtítulos SubRip (.srt) al formato WebVTT (.vtt) que necesita el elemento <track> de HTML5. La herramienta añade la cabecera WEBVTT (con metadatos opcionales), cambia la coma por el punto en los milisegundos, traduce las posiciones {\an8} a ajustes de línea y adapta las etiquetas <font color> al modelo de clases de WebVTT.
📤 Resumen rápido: ¿cómo paso de SRT a VTT?
Pega el contenido del archivo .srt, elige la cabecera (solo WEBVTT o con Kind e idioma) y copia el VTT resultante. Para el camino contrario, usa el convertidor de VTT a SRT. Y si el subtítulo está desincronizado, primero pásalo por el limpiador de tiempos en subtítulos SRT.
Por qué el vídeo web necesita WebVTT
Cuando incrustas un vídeo en una página con la etiqueta <video> y quieres añadirle subtítulos, se hace con un elemento hijo <track>:
<video controls> <source src="video.mp4" type="video/mp4"> <track kind="subtitles" src="subtitulos.vtt" srclang="es" label="Español" default> </video>
El único formato que aceptan los navegadores en ese src es WebVTT. Si le pasas un .srt, no se muestra nada: no hay ningún navegador que lea SubRip de forma nativa. Como la mayoría de subtítulos que circulan y que generan las herramientas de transcripción están en SRT, esta conversión es un paso casi obligatorio para publicar vídeo accesible en la web.
Qué cambia en la conversión
| SubRip (SRT) | WebVTT (VTT) |
|---|---|
| (sin cabecera) | WEBVTT en la primera línea |
00:01:02,500 | 00:01:02.500 |
{\an8} (texto arriba, estilo ASS) | line:0 tras el timecode |
<font color="yellow"> | <c.yellow> |
<i> <b> <u> | Iguales (válidas en VTT) |
| Número obligatorio | Identificador opcional |
Opciones de cabecera y metadatos
- Solo «WEBVTT»: la cabecera mínima que exige el estándar. Suficiente para que el vídeo funcione.
- WEBVTT + Kind e Idioma: añade
Kind: captionsyLanguage: es(con el código que indiques). Ayuda a los reproductores y a las herramientas de accesibilidad a identificar el tipo y el idioma de la pista. - WEBVTT + bloque STYLE: incluye un bloque
STYLEcon una regla::cuebásica (texto blanco sobre fondo semitransparente), como punto de partida para personalizar el aspecto de los subtítulos con CSS.
Posición y color
Muchos SRT «avanzados» incluyen etiquetas heredadas del formato SSA/ASS o del subtitulado profesional:
{\an7},{\an8},{\an9}colocan el texto en la parte superior de la pantalla (para no tapar rótulos). La herramienta los traduce aline:0, el ajuste de WebVTT que sitúa el cue en la primera línea.<font color="rojo">o<font color="#ff0000">se convierte en una clase<c.rojo>, que luego puedes estilar en el bloqueSTYLEcon::cue(.rojo) { color: red }.
Puedes desactivar cualquiera de estas conversiones si prefieres que las etiquetas simplemente se eliminen.
Ejemplo
Entrada SRT:
1
00:00:00,500 --> 00:00:03,000
{\an8}<font color="yellow">Título superior</font>
2
00:00:03,500 --> 00:00:07,000
<i>Texto en cursiva</i> normal.
Salida VTT (cabecera con Kind e idioma):
WEBVTT Kind: captions Language: es 1 00:00:00.500 --> 00:00:03.000 line:0 <c.yellow>Título superior</c> 2 00:00:03.500 --> 00:00:07.000 <i>Texto en cursiva</i> normal.
Cuándo necesitas esta conversión
- Vas a publicar un vídeo en tu propia web con subtítulos accesibles.
- Tienes la transcripción de un pódcast o webinar en SRT y quieres mostrarla sincronizada en un reproductor HTML5.
- Usas una plataforma de cursos o de vídeo que solo admite WebVTT.
- Estás desarrollando una aplicación web con vídeo y necesitas pistas de texto compatibles con la
WebVTT APIdel navegador.
Herramientas relacionadas en porcentaje.net
- Convertidor de VTT a SRT: la conversión inversa.
- Limpiador de Tiempos en Subtítulos SRT: corrige la sincronización antes de convertir.
- Extractor de Texto de Archivo SRT: obtén la transcripción limpia.
- Contador de Caracteres: comprueba que cada línea no supere el límite recomendado.
- Generador de Separadores ASCII: organiza tu bloque STYLE con cabeceras de comentario.
Preguntas Frecuentes (FAQ)
¿Por qué mi archivo SRT no se ve en un vídeo HTML5?
Porque los navegadores solo aceptan WebVTT en el elemento <track>. Un archivo SubRip, aunque tenga el mismo contenido, no se carga: hace falta la cabecera WEBVTT y el punto (no la coma) como separador de milisegundos. Esta herramienta hace esa conversión y el resultado ya se puede referenciar desde <track src="subtitulos.vtt">.
¿Debo conservar los números de los subtítulos?
En WebVTT el identificador de cue es opcional. Conservarlo (con la opción activada) puede ser útil si tu código JavaScript necesita referenciar subtítulos concretos con la WebVTT API. Si no, puedes quitarlos para un archivo más limpio; el vídeo funciona igual.
¿Qué pasa con los subtítulos que van en la parte de arriba?
Si en el SRT están marcados con {\an7}, {\an8} o {\an9} (una convención heredada de los formatos ASS/SSA), la herramienta añade line:0 al final de la línea de tiempo, que es la forma en que WebVTT indica que el subtítulo debe mostrarse arriba. Puedes desactivar esta conversión si prefieres que todos los subtítulos vayan abajo.
¿Cómo aplico colores a los subtítulos en WebVTT?
La herramienta convierte <font color="rojo"> en una clase <c.rojo>. Después, en un bloque STYLE del archivo VTT (o en el CSS de tu página) escribes ::cue(.rojo) { color: red }. Elige la opción de cabecera «WEBVTT + bloque STYLE» para partir de una plantilla.
¿Se sube mi archivo a algún servidor?
No. La conversión se ejecuta íntegramente en tu navegador con JavaScript. El contenido de los subtítulos no se transmite ni se almacena en ningún momento, por lo que puedes convertir material privado con total tranquilidad.