Media PlayerDisplay
Poster
Poster image support
The poster image is handled automatically by the ShakaVideo component through the poster prop. The video element will display the poster image before playback starts and automatically hide it when playback begins.
Usage
The poster is set via the poster prop on ShakaVideo or VideoPlayer:
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"
/>
);
}Or with custom layout:
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>
);
}