Skip to content

ReferenceMenu

usePlaybackRateOptions

Hook to build playback rate menu options from the player playback rate state

Import

import { usePlaybackRateOptions } from "@videojs/react";

usePlaybackRateOptions returns the current playback rate, the available options, and setRate / setValue callbacks for wiring rate selection into a menu. It returns null when the playback rate feature is not configured.

import { Menu, usePlaybackRateOptions } from "@videojs/react";

function SpeedMenu() {
  const playbackRate = usePlaybackRateOptions();
  if (playbackRate?.state.availability !== "available") return null;

  return (
    <Menu.RadioGroup value={playbackRate.value} onValueChange={playbackRate.setValue} aria-label="Speed">
      {playbackRate.options.map((option) => (
        <Menu.RadioItem key={option.value} value={option.value} disabled={option.disabled}>
          {option.label}
          <Menu.ItemIndicator checked={option.value === playbackRate.value} />
        </Menu.RadioItem>
      ))}
    </Menu.RadioGroup>
  );
}

Options come from the player’s configured playback rates. Each PlaybackRateOption has a string value, its numeric rate, a translated label, and a disabled flag. Labels default to the rate followed by a multiplication sign (e.g. 1.5×); pass formatRate to customize them. setValue accepts an option’s string value, while setRate accepts a number directly.

See PlaybackRateRadioGroup for the component-level pattern, and Menu for a complete settings menu example.

API Reference

usePlaybackRateOptions(props?): PlaybackRateOptionsResult | null

Parameters

ParameterTypeDefaultDetails
propsobject—

Return Value

PropertyTypeDetails
stateobject
labelstring
ratenumber
valuestring
selectedLabelstring
optionsPlaybackRateOption[]
disabledboolean
hiddenboolean
setRatefunction
setValuefunction