Skip to content
FrameworkStyle

PlaybackRateRadioGroup

A menu radio group for selecting playback speed

Creates radio items from the player playback rate state and selects the playback speed.

Import

import { PlaybackRateRadioGroup } from '@videojs/react/ui/playback-rate-radio-group';

Anatomy

<PlaybackRateRadioGroup.Root>
  <Menu.Trigger>
    <PlaybackRateRadioGroup.Value />
  </Menu.Trigger>
  <Menu.Content>
    <PlaybackRateRadioGroup.Options
      renderItem={(props, item) => (
        <Menu.RadioItem {...props}>
          {item.label}
          <Menu.ItemIndicator checked={item.checked} />
        </Menu.RadioItem>
      )}
    />
  </Menu.Content>
</PlaybackRateRadioGroup.Root>

Behavior

The group is available when the configured media exposes playback rates. Option labels default to the rate followed by a multiplication sign (e.g. 1.5×); pass formatRate to customize them.

PlaybackRateRadioGroup.Root uses usePlaybackRateOptions to own selection and renders no element. Wrap the menu’s Menu.Trigger and Menu.Content in it so the trigger inherits the group’s disabled and hidden state and exposes data-availability. PlaybackRateRadioGroup.Options renders the items: its required renderItem callback renders the Menu.RadioItem root and receives item state containing the translated label and current checked value. PlaybackRateRadioGroup.Value displays the selected label, typically inside the trigger. Options and Value render null when the playback rate feature is not configured.

The PlaybackRateRadioGroup export from the @videojs/react root is a compatibility component that composes Root and Options behind the former single-component props. Prefer the parts for new code.

Styling

Attribute Values Description
data-rate number Current playback rate.
data-disabled Present / absent Present when playback rate selection is disabled.
data-hidden Present / absent Present when playback-rate selection is unavailable.
data-availability "available" / "unavailable" Whether playback rates are available.

Unavailable groups receive the native hidden attribute.

Accessibility

The group uses the menu radio group pattern.

PlaybackRateRadioGroup.Options receives its accessible label from the label prop on PlaybackRateRadioGroup.Root or defaults to Playback rate. Override it with aria-label or aria-labelledby on PlaybackRateRadioGroup.Options.

Examples

Basic usage

import { Container, createPlayer, Menu } from '@videojs/react';
import { PlaybackRateRadioGroup } from '@videojs/react/ui/playback-rate-radio-group';
import { Video, videoFeatures } from '@videojs/react/video';
import type { ReactNode } from 'react';

const { Player } = createPlayer({ features: videoFeatures });

function SpeedMenu(): ReactNode {
  return (
    <Menu.Root side="top" align="end">
      <PlaybackRateRadioGroup.Root>
        <Menu.Trigger className="settings-trigger" render={<button type="button" />}>
          Speed
          <PlaybackRateRadioGroup.Value className="menu-hint" />
        </Menu.Trigger>
        <Menu.Popup className="menu">
          <Menu.Content>
            <PlaybackRateRadioGroup.Options
              className="menu-group"
              renderItem={(props, item) => (
                <Menu.RadioItem {...props} className="menu-item">
                  {item.label}
                  <Menu.ItemIndicator checked={item.checked} forceMount className="menu-indicator">
                    ✓
                  </Menu.ItemIndicator>
                </Menu.RadioItem>
              )}
            />
          </Menu.Content>
        </Menu.Popup>
      </PlaybackRateRadioGroup.Root>
    </Menu.Root>
  );
}

export default function BasicUsage() {
  return (
    <Player>
      <Container className="media-container">
        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
        <div className="menu-bar">
          <SpeedMenu />
        </div>
      </Container>
    </Player>
  );
}

API Reference

Root

Owns playback-rate option state and shares it with an enclosing menu. Does not render a DOM element.

Props

PropTypeDefaultDetails
disabledbooleanfalse
formatRatefunctionformatPlaybackRate
labelobject''

State

State is accessible via the render, className, and style props.

PropertyTypeDetails
label{ key: string; text: string } | string
valuestring
optionsreadonly Option[]
disabledboolean
hiddenboolean
availability'available' | 'unavailable'
ratenumber

Data attributes

AttributeTypeDetails
data-ratenumber
data-disabled
data-hidden
data-availability'available' | 'unavailable'

Options

Renders menu radio items for the player's available playback rates.

Props

PropTypeDefaultDetails
classNamestring | ((state: PlaybackRateRadioGroupCore.State) => string | undefined)—
renderReactElement | ((props: HTMLProps, state: PlaybackRateRadioGroupCore.State) => ReactElement | null)—
renderItem((props: PlaybackRateRadioGroupItemProps, state: PlaybackRateRadioGroupItemState) => ReactElement)—
styleCSSProperties | ((state: PlaybackRateRadioGroupCore.State) => CSSProperties | undefined)—

Value

Displays the selected playback-rate label.

Props

PropTypeDefaultDetails
classNamestring | ((state: PlaybackRateOptionsResult) => string | undefined)—
renderReactElement | ((props: HTMLProps, state: PlaybackRateOptionsResult) => ReactElement | null)—
styleCSSProperties | ((state: PlaybackRateOptionsResult) => CSSProperties | undefined)—