Video Player Foundation

Written by: Marlon Colca
Posted on 08 Sep 2025 - a month ago
nextjs typescript clones

Build a simple, robust <video> player that accepts multiple sources and optional subtitles — friendly to mobile, and easy to extend

Objetivo: crear un componente <video> robusto con múltiples fuentes y subtítulos.

API (extracto) 🧩

type Props = {
  sources: { src: string; type: string; label?: string }[];
  poster?: string;
  subtitles?: { src: string; lang: string; label: string; default?: boolean }[];
  autoPlay?: boolean;
  controls?: boolean;
  className?: string;
  storageKey?: string;
  resume?: boolean;
  autoFullscreen?: boolean;
};

Render básico (extracto) 🔧

<video
  preload="metadata"
  playsInline
  {...(autoPlay ? { autoPlay: true, muted: true } : {})}
>
  {[...sources]
    .sort(
      (a, b) =>
        (a.type.includes("mp4") ? 0 : 1) - (b.type.includes("mp4") ? 0 : 1)
    )
    .map((s) => (
      <source key={s.src} src={s.src} type={s.type} />
    ))}
  {(subtitles ?? []).map((t) => (
    <track
      key={t.src}
      src={t.src}
      kind="subtitles"
      srcLang={t.lang}
      label={t.label}
      {...(t.default ? { default: true } : {})}
    />
  ))}
  Tu navegador no soporta el elemento video.
</video>

Notas 📝

• preload="metadata" y playsInline para móviles.
• Empieza con MP4 progresivo; evalúa HLS/DASH cuando crezca el catálogo.

🔜 Coming up next

Subtitles: SRT to VTT in the Browser 💬✨

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

09 Sep 2025 - 25 days ago