Media Player
DefaultControls
A pre-built controls component with all standard player controls
A pre-built controls component that includes all standard player controls arranged in a common pattern. This is the easiest way to get a fully functional player UI when building custom layouts.
Props
Prop
Type
Examples
Basic Usage
import {
MediaProvider,
PlayerProvider,
PlayerContainer,
ShakaVideo,
DefaultControls,
} from "@shelby-protocol/player";
function VideoPlayer() {
return (
<MediaProvider>
<PlayerProvider>
<PlayerContainer>
<ShakaVideo
src="https://example.com/video.m3u8"
poster="https://example.com/poster.jpg"
className="w-full"
/>
<DefaultControls title="My Video" />
</PlayerContainer>
</PlayerProvider>
</MediaProvider>
);
}With VideoPlayer Component
For most use cases, you can use the VideoPlayer component which includes DefaultControls:
import { VideoPlayer } from "@shelby-protocol/player";
function VideoPlayer() {
return (
<VideoPlayer
src="https://example.com/video.m3u8"
poster="https://example.com/poster.jpg"
title="My Video"
/>
);
}