Skip to main content
PlaybackRateButton cycles through playback rates on click. The default rate list is [1, 1.2, 1.5, 1.7, 2]. After the last rate, it wraps back to the first. If the current rate isn’t in the list (e.g., set programmatically), the button jumps to the next rate greater than the current one.
Requires the playbackRate feature to be registered with the player.

​
Import

import { PlaybackRateButton } from '@videojs/react';

​
Basic Usage

import { PlaybackRateButton } from '@videojs/react';

function PlayerControls() {
  return <PlaybackRateButton />;
}

​
Custom Render with Rate Display

import { PlaybackRateButton } from '@videojs/react';

function PlayerControls() {
  return (
    <PlaybackRateButton
      render={(props, state) => (
        <button {...props}>
          {state.rate}&times;
        </button>
      )}
    />
  );
}

​
Custom Rates

import { PlaybackRateButton } from '@videojs/react';

function PlayerControls() {
  return (
    <PlaybackRateButton
      rates={[0.5, 1, 1.5, 2]}
    />
  );
}

​
Props

​
rates
number[]
Custom list of playback rates to cycle through. Defaults to [1, 1.2, 1.5, 1.7, 2].
​
render
ReactElement | ((props: HTMLProps, state: PlaybackRateButton.State) => ReactElement | null)
Custom render prop. Receives the computed HTML props and current state. Use state.rate to display the current rate.
​
label
string | ((state: PlaybackRateButton.State) => string)
Override the automatic aria-label. By default: "Playback rate 1.5" (includes the current rate).
​
disabled
boolean
Disables the button.
​
className
string | ((state: PlaybackRateButton.State) => string)
CSS class name or a function that receives state and returns a class name.
​
style
CSSProperties | ((state: PlaybackRateButton.State) => CSSProperties)
Inline style or a function that receives state and returns a style object.

​
State Data Attributes

AttributeValue / Description
data-rateThe current playback rate as a string (e.g., "1.5").

​
Accessibility

Renders a <button> element. The aria-label is automatically set to "Playback rate {rate}" (e.g., "Playback rate 1.5"). Override with the label prop. Keyboard activation: Enter / Space.

Build docs developers (and LLMs) love

Get started for freeTalk to us