media-playback-rate-button

A button that cycles through playback speed rates

Anatomy

<media-playback-rate-button></media-playback-rate-button>

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:

media-playback-rate-button::after {
  content: attr(data-rate) "\00D7";
}

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 { createPlayer, PlaybackRateButton } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';

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

export default function BasicUsage() {
  return (
    <Player.Provider>
      <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>}
        />
      </Player.Container>
    </Player.Provider>
  );
}

.media-container {
  position: relative;
}

.media-container video {
  width: 100%;
}

.media-playback-rate-button {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding-block: 8px;
  padding-inline: 20px;
  color: black;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  backdrop-filter: blur(10px);
}

<video-player class="video-player">
    <video
        src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
        autoplay
        muted
        playsinline
        loop
    ></video>
    <media-playback-rate-button class="media-playback-rate-button">
    </media-playback-rate-button>
</video-player>

.video-player {
  position: relative;
}

.video-player video {
  width: 100%;
}

.media-playback-rate-button {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding-block: 8px;
  padding-inline: 20px;
  color: black;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  backdrop-filter: blur(10px);
}

.media-playback-rate-button::after {
  content: attr(data-rate) "\00D7";
}

import '@videojs/html/video/player';
import '@videojs/html/ui/playback-rate-button';

API Reference

Props

Prop	Type	Default
`disabled`	`boolean`	`false`
Attribute `disabled` Description Whether the button is disabled.
`label`	`string \| function`	`''`
Attribute `label` Description Custom label for the button. Type `string \| ((state: PlaybackRateButtonState) => string)`
`menuTrigger`	`boolean`	`false`
Attribute `menu-trigger` Description When true, pointer activation opens a menu instead of cycling. React sets this automatically inside `Menu.Trigger`.

State

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

State is reflected as data attributes for CSS styling.

Property	Type	Details
`rate`	`number`
`label`	`string`

Data attributes

Attribute	Type	Details
`data-rate`	`number`
Description Current playback rate.