React API

Control playback through a ref and react to playback events.

SeamPlayerHandle

Pass a ref to control the player from your own buttons, keyboard handlers, or synced content.

React

"use client";

import { useRef } from "react";
import { SeamPlayer, type SeamPlayerProps, type SeamPlayerHandle } from "seamplayer";

const options = {
  "src": "/film.mp4"
} satisfies SeamPlayerProps;

export default function PlayerExample() {
  const player = useRef<SeamPlayerHandle>(null);
  return (
    <div id="playground">
      <SeamPlayer
        {...options}
        ref={player}
      />
      <div>
        <button onClick={() => player.current?.play()}>Play</button>
        <button onClick={() => player.current?.pause()}>Pause</button>
        <button onClick={() => player.current?.seek(0)}>Seek to start</button>
      </div>
    </div>
  );
}

play(): Start playback. Loads the video on first use.
pause(): Pause playback.
seek(time): Jump to a moment, in seconds.
video: The underlying HTML video element, once the first play has created it. Otherwise null.

Events

onPlay, onPause, onEnded, onTimeUpdate, and onError report playback as it happens.

React

"use client";

import { useState } from "react";
import { SeamPlayer, type SeamPlayerProps } from "seamplayer";

const options = {
  "src": "/film.mp4"
} satisfies SeamPlayerProps;

export default function PlayerExample() {
  const [status, setStatus] = useState("Ready");
  return (
    <div id="playground">
      <SeamPlayer
        {...options}
        onPlay={() => setStatus("Playing")}
        onPause={() => setStatus("Paused")}
        onEnded={() => setStatus("Ended")}
        onTimeUpdate={(time) => setStatus(`Time: ${Math.floor(time)}s`)}
        onError={(error) => setStatus(`Error: ${error?.message || "Unable to play this source"}`)}
      />
      <p role="status">{status}</p>
    </div>
  );
}

Turn on Imperative controls or Playback events in the playground to generate either example for your own configuration.