FrameworkStyle

Controls

Containers for composing and auto-hiding player controls

Anatomy

Import the component and assemble its parts: 

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

Examples

Basic Usage 

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

import './BasicUsage.css';

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

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

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

            <Time.Value type="current" className="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