ReferenceMenus

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';

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. It offers the player’s playback rates, or its own when you set rates. Option labels default to the rate followed by a multiplication sign (e.g. 1.5×); pass formatRate to customize them.

When the current rate isn’t one the group offers, such as 1.1 set through the media API, the group adds it as an extra item before the next faster rate. That item carries data-custom, and its accessible name is “Custom, 1.1×” while its visible label stays 1.1×. It goes away once the rate is back on the list.

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.

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. Each item carries data-rate, and an item for a current rate the group doesn’t offer also carries data-custom.

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, PlaybackRateRadioGroup } from '@videojs/react';
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>
  );
}

.media-container {
  position: relative;
}

.media-container video {
  width: 100%;
}

.menu-bar {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.settings-trigger {
  padding: 6px 16px;
  color: black;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 9999px;
  backdrop-filter: blur(10px);
}

.menu-hint {
  margin-left: 8px;
  color: rgba(0, 0, 0, 0.6);
}

.menu-hint:empty {
  display: none;
}

.menu {
  --media-menu-side-offset: 8px;
  box-sizing: border-box;
  display: grid;
  gap: 2px;
  min-width: 180px;
  max-width: var(--media-menu-available-width, var(--media-popover-available-width, none));
  max-height: var(--media-menu-available-height, var(--media-popover-available-height, none));
  padding: 6px;
  margin: 0;
  overflow: auto;
  overscroll-behavior: none;
  font-size: 14px;
  color: white;
  background: rgba(0, 0, 0, 0.88);
  border: 0;
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

.menu-group {
  display: grid;
  gap: 2px;
}

.menu-item {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  padding: 0 10px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
}

.menu-item[data-highlighted] {
  background: rgba(255, 255, 255, 0.16);
}

.menu-indicator {
  opacity: 0;
}

[role="menuitemradio"][aria-checked="true"] .menu-indicator {
  opacity: 1;
}

API Reference

Root

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

Props

Prop	Type	Default
`disabled`	`boolean`	`false`
Description Whether playback rate selection is disabled.
`formatRate`	`function`	`formatPlaybackRate`
Description Custom formatter for visible playback rate labels. Type `((rate: number) => string)`
`label`	`object`	`''`
Description Custom label for the options group. Type `{ key: string; text: string } \| string \| ((state: PlaybackRateRadioGroupState) => Text \| string)`
`rates`	`readonly number[] \| string`	`[]`
Description Rates to offer, in order, in place of the player's `defaultPlaybackRates`. HTML takes a space-separated list, such as `rates="1 1.5 2"`.

State

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

Property	Type	Details
`label`	`{ key: string; text: string } \| string`
`value`	`string`
Description Current radio-group value.
`options`	`readonly Option[]`
Description Ordered options displayed by platform adapters.
`disabled`	`boolean`
Description Whether the entire option group is disabled.
`hidden`	`boolean`
Description Whether the option group is hidden because no meaningful selection is available.
`availability`	`'available' \| 'unavailable' \| 'unsupp...`
Description Whether the media exposes a meaningful selection. `unsupported` when the media has no such capability at all. Type `'available' \| 'unavailable' \| 'unsupported'`
`rate`	`number`

Data attributes

Attribute	Type	Details
`data-rate`	`number`
Description Current playback rate.
`data-disabled`	—
Description Present when playback rate selection is disabled.
`data-hidden`	—
Description Present when playback rate selection is unavailable.
`data-availability`	`'available' \| 'unavailable' \| 'unsupp...`
Description Indicates playback rate availability (`available`, `unavailable`, `unsupported`). Type `'available' \| 'unavailable' \| 'unsupported'`

Options

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

Props

Prop	Type	Default
`className`	`string \| function`	—
Description Class name or function returning class name from state. Type `string \| ((state: PlaybackRateRadioGroupState) => string \| undefined)`
`render`	`ReactElement \| function`	—
Description Render prop for custom element. Type `ReactElement \| ((props: HTMLProps, state: PlaybackRateRadioGroupState) => ReactElement \| null)`
`renderItem`	`function`	—
Description Render one consumer-owned menu radio item for every playback rate. Type `((props: PlaybackRateRadioGroupItemProps, state: PlaybackRateRadioGroupItemState) => ReactElement)`
`style`	`CSSProperties \| function`	—
Description Style or function returning style from state. Type `CSSProperties \| ((state: PlaybackRateRadioGroupState) => CSSProperties \| undefined)`

Value

Displays the selected playback-rate label.

Props

Prop	Type	Default
`className`	`string \| function`	—
Description Class name or function returning class name from state. Type `string \| ((state: PlaybackRateOptionsResult) => string \| undefined)`
`render`	`ReactElement \| function`	—
Description Render prop for custom element. Type `ReactElement \| ((props: HTMLProps, state: PlaybackRateOptionsResult) => ReactElement \| null)`
`style`	`CSSProperties \| function`	—
Description Style or function returning style from state. Type `CSSProperties \| ((state: PlaybackRateOptionsResult) => CSSProperties \| undefined)`