Media PlayerMenus
PlaybackRateSubMenuButton
Menu for selecting playback speed
Submenu component for selecting playback speed. Provides common speed options (0.5x, 1x, 1.5x, 2x). The current speed is displayed in the format "Playback Speed 1.5x".
Examples
Basic Usage
import {
MediaProvider,
PlayerProvider,
PlayerContainer,
ShakaVideo,
ControlsContainer,
ControlsGroup,
DropdownMenu,
DropdownMenuContent,
SettingsMenuTriggerButton,
RenditionsSubMenuButton,
PlaybackRateSubMenuButton,
} 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">
<div className="flex-1" />
<DropdownMenu>
<SettingsMenuTriggerButton />
<DropdownMenuContent side="top" align="end">
<RenditionsSubMenuButton />
<PlaybackRateSubMenuButton />
</DropdownMenuContent>
</DropdownMenu>
</ControlsGroup>
</ControlsContainer>
</PlayerContainer>
</PlayerProvider>
</MediaProvider>
);
}