PlaybackRateButton

A button that sets one playback rate. Render one per option, for example inside a menu.

import { PlaybackRateButton } from 'react-media-kit'

import { PlaybackRateButton } from 'react-media-kit'

const RATES = [0.5, 1, 1.5, 2]

<div role="group" aria-label="Playback speed">
  {RATES.map((rate) => (
    <PlaybackRateButton.Root key={rate} playbackRate={rate} className="rate">
      {rate}×
    </PlaybackRateButton.Root>
  ))}
</div>

.rate[data-active] {
  color: #d2cefd;
  background: rgb(145 132 217 / 0.16);
}

Render it inside Player.Root, next to a Media.Video or Media.Audio.

Anatomy

<PlaybackRateButton.Root playbackRate={1.5} />

API reference

It accepts the attributes of the <button> it renders, plus a ref, and sets the media state attributes. Passing aria-label replaces a default label.

PlaybackRateButton.Root

renders <button>

Sets the playback rate to playbackRate when clicked. For 1.5, its aria-label is "Playback speed: 1.5x".

Prop	Type	Default	Description
playbackRate	number	required	The rate to set on click, such as `1.5`.

Data attribute	Description
data-active	The current playback rate equals this button’s `playbackRate`, whether or not the media is playing.

Your onClick runs before the built-in one; call event.preventDefault() in it to skip the built-in behavior.

Media state attributes

Five of these describe loading, and exactly one of them is set at a time. The other three mark features the browser lacks. Use them to hide controls that can’t work, or to style the player while it loads.

Data attribute	Description
data-media-pending	Loading hasn’t started. This is the initial state.
data-media-loading	The media has started loading.
data-media-metadata-loaded	The duration and dimensions are known, but there isn’t enough data to play yet.
data-media-playable	The media can play. It stays set if playback later stalls to buffer.
data-media-error	The media element reported an error, such as a network or decoding failure. A blocked `play()` call doesn’t set it; use `onError` for that.
data-fullscreen-unsupported	The browser can’t go fullscreen, or support hasn’t been detected yet.
data-pip-unsupported	Picture-in-picture isn’t available, such as for audio, or support hasn’t been detected yet.
data-volume-change-unsupported	The browser doesn’t let scripts set the volume, such as on iOS, or support hasn’t been detected yet.