Controls

A wrapper for the control bar that you can style from the player’s state.

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

import { Controls, PlayButton, Seekbar, TimeDisplay } from 'react-media-kit'

<Controls.Root className="controls">
  <PlayButton.Root className="play">Play</PlayButton.Root>
  <Seekbar.Root className="seekbar">
    <Seekbar.Track className="seekbar-track">
      <Seekbar.Progress className="seekbar-progress" />
      <Seekbar.Thumb className="seekbar-thumb" />
    </Seekbar.Track>
  </Seekbar.Root>
  <TimeDisplay.Timer />
</Controls.Root>

.controls {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  transition: opacity 0.2s;
}
/* Dim the bar until the media starts loading */
.controls[data-media-pending] {
  opacity: 0.5;
}
.controls[data-media-error] {
  display: none;
}

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

Anatomy

<Player.Container>
  <Media.Video />
  <Controls.Root>
    {/* buttons, seekbar, time */}
  </Controls.Root>
</Player.Container>

API reference

It accepts the attributes of the <div> it renders, plus a ref, and sets the media state attributes.

Controls.Root

renders <div>

Usually placed inside Player.Container after the media and overlay. It adds no behavior of its own; use the media state attributes on it to show, hide or restyle the controls.

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.