FrameworkStyle

Controls

Containers for composing and auto-hiding player controls

Anatomy

Import the component and assemble its parts: 

<Controls.Root>
  <Controls.Group />
</Controls.Root>

Behavior

If the user is active, or if the video is paused, this component will show controls. Otherwise, it will hide them after a short delay.

User activity is tracked via pointer movement, keyboard input, and focus events on the player container. On touch devices, a quick tap toggles visibility. mouseleave immediately sets the user as inactive.

Styling

By default, controls have the following styles: 

/* Click-through: clicks pass through controls to video beneath */
media-controls {
  pointer-events: none;
}

media-controls-group {
  pointer-events: auto;
}

/* Fade transition */
media-controls {
  transition: opacity 0.25s;
}

media-controls:not([data-visible]) {
  opacity: 0;
}

Accessibility

No ARIA role is applied to <media-controls> — it is a layout wrapper, not a landmark. <media-controls-group> automatically receives role="group" when an aria-label or aria-labelledby attribute is provided; otherwise no role is assigned.

Examples

Basic Usage 

import { Controls, createPlayer, features, PlayButton, Time } from '@videojs/react';
import { Video } from '@videojs/react/video';

import './BasicUsage.css';

const Player = createPlayer({ features: [...features.video] });

export default function BasicUsage() {
  return (
    <Player.Provider>
      <Player.Container className="react-controls-basic">
        <Video
          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
          autoPlay
          muted
          playsInline
          loop
        />

        <Controls.Root className="react-controls-basic__root">
          <Controls.Group className="react-controls-basic__bottom" aria-label="Playback controls">
            <PlayButton
              className="react-controls-basic__button"
              render={(props, state) => <button {...props}>{state.paused ? 'Play' : 'Pause'}</button>}
            />

            <Time.Value type="current" className="react-controls-basic__time" />
          </Controls.Group>
        </Controls.Root>
      </Player.Container>
    </Player.Provider>
  );
}

API Reference

Root

Root container for player controls state and rendered control content.

State

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

Property Type
visible boolean
userActive boolean

Data attributes

Attribute Description
data-visible Present when controls are visible.
data-user-active Present when the user has recently interacted.

Group

Layout group for related controls; sets role="group" when labeled.

VideoJS