Sources and quality

One file

Pass any MP4 or WebM URL the browser can play. Nothing downloads until someone presses play, so add a poster to show a frame in the meantime.

<SeamPlayer src="/film.mp4" poster="/poster.jpg" />

Several sizes

Pass the same video in several MP4 sizes with their pixel heights. The settings menu gains a Quality row.

<SeamPlayer
  src={[
    { src: "/film-1080.mp4", height: 1080 },
    { src: "/film-720.mp4", height: 720 },
    { src: "/film-480.mp4", height: 480 },
  ]}
  poster="/poster.jpg"
/>

• Auto picks the smallest size that’s sharp at the player’s size on that screen.
• Switching keeps the current moment, and whether the video was playing.
• List the sizes in any order; the menu sorts them.

HLS streams

Pass an .m3u8 playlist. Quality levels come from the stream itself. Browsers that play HLS natively, like Safari, use it directly; others load hls.js on the first play, so it never weighs down the page.

<SeamPlayer
  src="https://cdn.example.com/launch/master.m3u8"
  poster="https://cdn.example.com/launch/poster.jpg"
/>

Errors

If a source can’t play, including an HLS stream that fails to load, the player shows an error state and calls onError with the MediaError.