YamlBox

Convertidores de datos · 5 minutos de lectura

SRT a VTT: subtítulos que el navegador realmente cargará

Un elemento de vídeo HTML5 ignorará felizmente un archivo SRT: el elemento `<track>` del navegador carga WebVTT y nada más. Por lo tanto, la conversión de SRT a VTT es un paso rutinario en la publicación de videos en la web, y las diferencias entre los dos formatos son menores de lo que cabría esperar, razón por la cual vale la pena comprender la conversión en lugar de tratarla como una caja negra.

Actualizado

¿Qué cambia entre SRT y VTT?

  • El encabezado: los archivos WebVTT comienzan con la línea `WEBVTT`, opcionalmente con un título después.
  • Códigos de tiempo: SRT escribe `00:00:12,500` con una coma antes de milisegundos; VTT escribe `00:00:12.500` con un punto.
  • Identificadores de señal: ambos permiten un nombre opcional encima de la señal; VTT los mantiene más útiles para secuencias de comandos.
  • Códigos de tiempo de finalización: requeridos en SRT; VTT puede inferir un final a partir de la siguiente señal, aunque explícito es más seguro.
  • Funciones adicionales: VTT agrega configuraciones de señales como posición de línea, alineación y marcado de texto.

Estilo y marcado seguro

WebVTT permite un conjunto limitado de etiquetas dentro de una cue: `<b>`, `<i>`, `<u>` y `<c.classname>` para las clases a las que diseñas con CSS a través de `::cue`. Es más probable que cualquier otra cosa se muestre como texto literal. Esta es también la razón por la que la conversión debe preservar el formato simple cuando esté presente y eliminar lo que el formato no puede expresar, en lugar de escapar del marcado entre corchetes angulares visibles.

                WEBVTT

00:00:12.500 --> 00:00:15.000 align:start
That was the point.
              

Por qué es importante más allá de la reproducción

Los subtítulos son un requisito de accesibilidad en la mayoría de las plataformas y también son material indexado: una pista de texto proporciona a los motores de búsqueda y asistentes un guión legible por máquina que el audio por sí solo no proporciona. Por lo tanto, un `<track kind="captions">` correctamente codificado cumple una doble función: cumplir con el cumplimiento y darle al video una presencia de texto que de otro modo carecería.

La codificación importa: sirva VTT como UTF-8 con un juego de caracteres apropiado. Un archivo con caracteres acentuados guardado con una codificación heredada se mostrará como mojibake en el reproductor y parecerá un error de conversión en lugar de uno de codificación.

El flujo de trabajo práctico

  1. Convierta SRT a VTT y verifique que la primera y la última cue tengan códigos de tiempo correctos.
  2. Guárdelo como UTF-8 con la extensión .vtt y sírvalo con un tipo de contenido texto/vtt donde controle el servidor.
  3. Haz referencia a él desde el elemento de vídeo con `<track kind="captions" srclang="en" label="English" default>`.
  4. Cargue el archivo de subtítulos junto con el archivo de video para que las rutas relativas sigan funcionando después de la implementación.

Sin conexión e instantáneo

Los archivos de subtítulos son documentos de texto grandes y, a menudo, trabajos inéditos; el guión de una revisión no debe cargarse en ningún lugar. El conversor de SRT a VTT de este sitio se ejecuta en el navegador, por lo que una transcripción de dos horas se convierte en una fracción de segundo sin salir de su máquina.

SRT a VTT — preguntas frecuentes

¿Por qué mi reproductor de video ignora mi archivo de subtítulos?

Casi siempre porque el archivo es SRT en lugar de WebVTT. HTML5 `<track>` solo acepta VTT. Convierta a VTT, confirme que el archivo comienza con la línea WEBVTT, luego verifique que los códigos de tiempo usen puntos, no comas.

¿YouTube y otras plataformas necesitan VTT?

YouTube acepta cargas SRT y VTT y las convierte internamente, pero la mayoría de los reproductores autohospedados y todos los elementos de vídeo HTML5 necesitan WebVTT. La conversión antes de la carga mantiene los subtítulos igual en todas partes.

¿Se puede diseñar WebVTT?

Sí, dentro del texto de referencia puedes usar las etiquetas de negrita, cursiva y subrayado, además de intervalos de clases, y aplicar estilo a las clases con CSS contra el pseudoelemento `::cue`. El posicionamiento se controla con configuraciones de cue como línea, posición y alineación.

Herramientas mencionadas en esta publicación.

Explore la lista completa de 19 herramientas

Más artículos para leer

Todas las 19 publicaciones →