Skip to content

ReferenceButtons

PlaybackRateButton

A button that cycles through playback speed rates

Import

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

Anatomy

<PlaybackRateButton />

Behavior

Cycles through the player’s playback rates on click, in the order they are listed. The default list is [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]; see the playback rate feature to set your own for the whole player, or set rates on the button to give it its own list. 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.

When the media’s playback rate is unavailable or unsupported, such as on an embed that takes no speed command, the component returns null.

Styling

Attribute Values Description
data-rate Number Current playback rate
data-availability "available" | "unavailable" | "unsupported" Whether the media can change its playback rate
data-hidden Present / absent Present on the HTML element while playback rate is unavailable or unsupported

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"). Its tooltip shows "Playback rate" without the value. Override both 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
ratesreadonly number[] | string[]

State

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

PropertyTypeDetails
label{ key: string; text: string } | string
ratenumber
availability'available' | 'unavailable' | 'unsupp...
hiddenboolean

Data attributes

AttributeTypeDetails
data-ratenumber
data-availability'available' | 'unavailable' | 'unsupp...
data-hidden—

CSS custom properties

VariableDescription
--media-playback-rate-lengthCharacters in the current rate as text, such as 4 for 1.75. Lets a skin size the label to fit the button.