VideoPlayer

The main player component that combines MediaProvider, PlayerProvider, PlayerContainer, ShakaVideo, and DefaultControls. This is the recommended entry point for most use cases.

Showcase

Basic Usage

import { VideoPlayer } from "@shelby-protocol/player";

function MyVideoPlayer() {
  return (
    <VideoPlayer
      src="https://example.com/video.m3u8"
      poster="https://example.com/poster.jpg"
      title="My Video"
    />
  );
}

With Event Handlers

import { VideoPlayer } from "@shelby-protocol/player";

function MyVideoPlayer() {
  return (
    <VideoPlayer
      src="https://example.com/video.m3u8"
      poster="https://example.com/poster.jpg"
      title="My Video"
      onPlay={() => console.log("Playback started")}
      onPause={() => console.log("Playback paused")}
      onTimeUpdate={(e) => console.log("Current time:", e.currentTime)}
    />
  );
}

With Custom Configuration

import { VideoPlayer } from "@shelby-protocol/player";

function MyVideoPlayer() {
  return (
    <VideoPlayer
      src="https://example.com/video.m3u8"
      poster="https://example.com/poster.jpg"
      title="My Video"
      config={{
        abr: {
          enabled: true,
          defaultBandwidthEstimate: 2000000,
        },
        streaming: {
          bufferingGoal: 30,
        },
      }}
    />
  );
}

With Autoplay

import { VideoPlayer } from "@shelby-protocol/player";

function MyVideoPlayer() {
  return (
    <VideoPlayer
      src="https://example.com/video.m3u8"
      poster="https://example.com/poster.jpg"
      title="My Video"
      autoplay
    />
  );
}

Note: Autoplay may be blocked by browser policies. The player will automatically mute when autoplay is enabled to comply with browser autoplay policies.

With State Change Callback

import { VideoPlayer } from "@shelby-protocol/player";

function MyVideoPlayer() {
  const handleStateChange = (state) => {
    console.log("Media state changed:", state);
  };

  return (
    <VideoPlayer
      src="https://example.com/video.m3u8"
      poster="https://example.com/poster.jpg"
      title="My Video"
      onStateChange={handleStateChange}
    />
  );
}

Props

Extends ShakaVideoProps and includes additional props:

Prop	Type	Description
`title`	`string`	The title to display in the controls
`onStateChange`	`(state: MediaState) => void`	Callback when media state changes
`className`	`string`	Additional CSS classes for the container

VideoPlayer

On this page