Skip to content
FrameworkStyle

PlaybackRateButton

A button that cycles through playback speed rates

Import

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

Editable styled source

Install the styled component and its exact dependencies with Shadcn, or copy the same generated files manually.

Add the @videojs namespace for the reacttailwind catalog, then install the editable source.

{
  "registries": {
    "@videojs": "https://shadcn.videojs.org/r/react/{name}.json"
  }
}
pnpm dlx shadcn@latest add @videojs/playback-rate-button

Installs `@/components/videojs/ui/playback-rate-button.tsx` for use inside a compatible Video.js Player or Skin.

Anatomy

<PlaybackRateButton />

Behavior

Cycles through playback rates on click. The default rate list is [0.2, 0.5, 0.7, 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.

When menuTrigger is enabled, activation opens the linked playback-rate menu instead of cycling through rates. Use this mode when the button is the trigger for a Menu that contains playback-rate options.

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.

In menu-trigger mode, the button behaves as a menu trigger and reflects menu state through the trigger attributes.

Examples

Basic Usage

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

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

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

API Reference

Props

PropTypeDefaultDetails
disabledbooleanfalse
labelobject''
menuTriggerbooleanfalse

State

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

PropertyTypeDetails
label{ key: string; text: string } | string
ratenumber

Data attributes

AttributeTypeDetails
data-ratenumber