FrameworkStyle

PlaybackRateButton

A button that cycles through playback speed rates

Anatomy 

<PlaybackRateButton />

Behavior

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.

Styling

Display the current rate using the data-rate attribute:

Use the render prop for rate display: 

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

Accessibility

Renders a <button> with an automatic aria-label of "Playback rate {rate}" (e.g., "Playback rate 1.5"). Override with the label prop. Keyboard activation: Enter / Space.

Examples

Basic Usage 

import { createPlayer, PlaybackRateButton } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';

import './BasicUsage.css';

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

export default function BasicUsage() {
  return (
    <Player.Provider>
      <Player.Container className="react-playback-rate-button-basic">
        <Video
          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
          autoPlay
          muted
          playsInline
          loop
        />
        <PlaybackRateButton
          className="react-playback-rate-button-basic__button"
          render={(props, state) => <button {...props}>{Math.round(state.rate * 10) / 10}&times;</button>}
        />
      </Player.Container>
    </Player.Provider>
  );
}

API Reference

Props

Prop Type Default
disabled boolean false
label string | function ''

State

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

Property Type
rate number

Data attributes

Attribute Type
data-rate number
VideoJS