Media PlayerDisplay
CurrentTimeDisplay
Displays the current playback time and total duration
Displays the current playback time and total duration in a formatted string (e.g., "1:23 / 5:45" or "1:02:03 / 2:15:45"). Format is MM:SS / MM:SS for shorter videos and HH:MM:SS / HH:MM:SS for videos longer than an hour.
Props
| Prop | Type | Description |
|---|---|---|
className | string | Additional CSS classes |
Examples
Basic Usage
import {
MediaProvider,
PlayerProvider,
PlayerContainer,
ShakaVideo,
ControlsContainer,
ControlsGroup,
PlayButton,
CurrentTimeDisplay,
} 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"
/>
<ControlsContainer>
<ControlsGroup className="p-4">
<PlayButton />
<CurrentTimeDisplay />
</ControlsGroup>
</ControlsContainer>
</PlayerContainer>
</PlayerProvider>
</MediaProvider>
);
}With Other Controls
import {
MediaProvider,
PlayerProvider,
PlayerContainer,
ShakaVideo,
ControlsContainer,
ControlsGroup,
PlayButton,
MuteButton,
CurrentTimeDisplay,
MediaTitle,
} 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"
/>
<ControlsContainer>
<ControlsGroup className="p-4">
<PlayButton />
<MuteButton />
<CurrentTimeDisplay />
<MediaTitle title="My Video" />
</ControlsGroup>
</ControlsContainer>
</PlayerContainer>
</PlayerProvider>
</MediaProvider>
);
}