ShakaVideo

The core video component that wraps shaka-video-element and integrates with the player context.

Usage

import {
  MediaProvider,
  PlayerProvider,
  PlayerContainer,
  ShakaVideo,
  DefaultControls
} from '@shelby-protocol/player'

function MyPlayer() {
  return (
    <MediaProvider>
      <PlayerProvider>
        <PlayerContainer>
          <ShakaVideo
            src="https://example.com/video.m3u8"
            poster="https://example.com/poster.jpg"
            config={{
              abr: { enabled: true }
            }}
            className="w-full"
          />
          <DefaultControls title="My Video" />
        </PlayerContainer>
      </PlayerProvider>
    </MediaProvider>
  )
}

Props

Prop	Type	Description
`src`	`string`	The URL of the video source (HLS/DASH manifest)
`poster`	`string`	URL of the poster image
`config`	`shaka.PlayerConfiguration`	Shaka Player configuration object
`className`	`string`	Additional CSS classes
`autoplay`	`boolean`	Enable autoplay (will be muted)
`onPlay`	`() => void`	Callback when playback starts
`onPause`	`() => void`	Callback when playback pauses
`onTimeUpdate`	`(e: Event) => void`	Callback when time updates
`onDurationChange`	`(e: Event) => void`	Callback when duration changes

ShakaVideo

ShakaVideo

Usage

Props

On this page