Subtitles: SRT to VTT in the Browser 💬✨

Subtitles: SRT to VTT in the Browser 💬✨

Written by: Marlon Colca
Posted on 09 Sep 2025 - 25 days ago
nextjs typescript clones

Add support for .srt subtitles by converting them to WebVTT on the fly, so the native browser player can render captions without extra tooling.


Objetivo: soportar .srt convirtiéndolos a WebVTT en tiempo de ejecución.

Archivos 🗂️

  • src/lib/subtitles.ts: helpers isSrtUrl, srtToVtt, processSubtitles.
  • src/hooks/useSubtitles.ts: hook que obtiene .srt, convierte a VTT y devuelve tracks procesados.
  • src/components/VideoPlayer.tsx: usa useSubtitles() y renderiza <track>.

Conversión (extracto) 🔁

export function srtToVtt(srt: string): string {
  const text = srt.replace(/^\uFEFF/, "");
  const blocks = text
    .replace(/\r\n/g, "\n")
    .replace(/\r/g, "\n")
    .split(/\n\n+/);
  const out: string[] = ["WEBVTT", ""];
  for (const b of blocks) {
    const lines = b.split("\n").filter((l) => l.trim() !== "");
    if (!lines.length) continue;
    let i = 0;
    if (/^\d+$/.test(lines[0].trim())) i = 1;
    if (!lines[i]) continue;
    const time = lines[i]
      .replace(/,/, ".")
      .replace(/ --> .*?,/g, (m) => m.replace(",", "."));
    out.push(time, ...lines.slice(i + 1), "");
  }
  return out.join("\n");
}

Limitaciones ⚠️

  • Estilos/características avanzadas de SRT no se preservan; para máxima fidelidad, convierte a .vtt offline.
  • Si el .srt es remoto, el servidor debe permitir CORS.

🔜 Coming up next


Resume Playback and Progress UI

Resume Playback and Progress UI

Persist and restore playback position, and reflect it in the catalog UI.

10 Sep 2025 - 24 days ago