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>
  );
}