Installation

Add Seamplayer to a React 18 or 19 app, including Next.js and other server-rendered frameworks.

Install the package

Bash

npm install seamplayer

The React entry needs React 18 or 19. Astro, Svelte and plain JavaScript can use the framework-free entries. hls.js ships with the package and loads only when an HLS source starts playing.

Choose your framework

Pick the framework you use to see how to add a player. For more detail, see Frameworks.

React

import { SeamPlayer } from "seamplayer";

export default function Film() {
  return (
    <SeamPlayer
      src="/film.mp4"
      poster="/poster.jpg"
      title="Your film"
    />
  );
}

The player fills its container’s width at 16:9. Wrap it in an element with the width you want, or pass className or style. See the React API for every prop and ref method.

Styles

Default styles are included automatically, including during server rendering. There is no CSS file to import. To change colors, corners, and fonts, see Styling.

Requirements

React 18 or 19 for the React adapter; other web frameworks use the custom element or core API. Both ESM and CommonJS are supported.
A source the browser can play: MP4, WebM, or an HLS playlist (.m3u8).
Captions and downloads from another origin need CORS or a Content-Disposition: attachment header.