Media tools

Poster and duration

The poster shows until the first play, with the duration on it. The video itself loads only when someone presses play.

<SeamPlayer src="/film.mp4" poster="/poster.jpg" duration={29} />

Filmstrip and previews

Give the player a sprite sheet: one image with count frames of width × height, columns per row. Frame i shows the moment (i + 0.5) × interval seconds. As the pointer comes near, the seek bar opens into these frames, with the one under the pointer magnified.

<SeamPlayer
  src="/film.mp4"
  thumbnails={{
    url: "/scrub.jpg", // one image holding every frame
    width: 320,        // each frame's size in pixels
    height: 180,
    columns: 10,       // frames per row
    count: 29,         // frames in total
    interval: 1,       // seconds between frames
  }}
/>

Chapters

The seek bar splits into a segment at each chapter’s start, in seconds. The current chapter shows next to the time and in the settings menu.

<SeamPlayer
  src="/film.mp4"
  chapters={[
    { start: 0, title: "Lisbon" },
    { start: 4, title: "Western Norway" },
    { start: 9, title: "Mumbai" },
  ]}
/>

Captions

Pass WebVTT files. The player draws captions itself, above its controls, and viewers choose the track and text size. Caption files on another origin need CORS.

<SeamPlayer
  src="/film.mp4"
  captions={[
    { src: "/captions/en.vtt", lang: "en", label: "English" },
    { src: "/captions/es.vtt", lang: "es", label: "Español" },
  ]}
/>

Downloads

Offer one file, several sizes listed with their file sizes, or your own handler. URLs must be on your origin or send a Content-Disposition: attachment header.

<SeamPlayer
  src="/film.mp4"
  download={[
    { url: "/film-1080.mp4", label: "1080p", size: 210_000_000 },
    { url: "/film-720.mp4", label: "720p", size: 98_000_000 },
  ]}
/>

// Or fetch a signed URL first
<SeamPlayer src="/film.mp4" download={() => downloadSigned("film")} />

Links to a moment

With shareUrl, the menu offers “Copy link at 0:12”. The player appends ?t=12 to the URL; read it on that page and pass it back as startTime.

<SeamPlayer
  src="/film.mp4"
  shareUrl="/watch/launch"
  startTime={Number(searchParams.get("t")) || undefined}
/>

Resume and the end screen

A resumeKey remembers where each viewer stopped and offers “Continue from” next time. endAction adds a button beside Replay when the video ends. Volume, speed, and caption choices are remembered across every player on the site.

<SeamPlayer
  src="/film.mp4"
  resumeKey="launch-film"
  endAction={{ label: "Watch the next film", href: "/watch/next" }}
/>

Try each tool on and off in the playground.