Media PlayerMenus
QualitiesSubMenuButton
Menu for selecting video quality/bitrate
Submenu component for selecting video quality/bitrate. Lists available tracks sorted by height and allows manual selection or enabling adaptive bitrate (Auto). Displays qualities in the format "Auto", "1080p", "720p", "480p", etc., depending on available tracks.
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>
);
}