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

Anatomy

<PlaybackRateRadioGroup.Root>
  <PlaybackRateRadioGroup.Value />
  <PlaybackRateRadioGroup.Options
    renderItem={(props, item) => (
      <Menu.RadioItem {...props}>
        {item.label}
        <Menu.ItemIndicator checked={item.checked} />
      </Menu.RadioItem>
    )}
  />
</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 owns selection and publishes option state to an enclosing Menu. Value displays the selected label. Options generates each item and returns 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.

Accessibility

The group uses the menu radio group pattern.

The component receives an accessible label from the label prop or defaults to Playback rate. Override it with aria-label or aria-labelledby.

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">
      <Menu.Trigger className="settings-trigger" render={<button type="button" />}>
        Speed
      </Menu.Trigger>
      <Menu.Popup className="menu">
        <Menu.Content>
          <PlaybackRateRadioGroup.Root>
            <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>
              )}
            />
          </PlaybackRateRadioGroup.Root>
        </Menu.Content>
      </Menu.Popup>
    </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

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)—