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.
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>
.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");
}
.vtt
offline..srt
es remoto, el servidor debe permitir CORS.Persist and restore playback position, and reflect it in the catalog UI.
10 Sep 2025 - 24 days ago