Controls

User activity and controls visibility state for the player store

Read-only — tracks user activity for showing and hiding controls.

State

State	Type	Description
`userActive`	`boolean`	Whether the user has recently interacted
`controlsVisible`	`boolean`	Whether controls should be visible (active or paused)

Selector

Pass selectControls to usePlayer to subscribe to controls state. Returns undefined if the controls feature is not configured.

import { selectControls, usePlayer } from '@videojs/react';

function ControlsOverlay({ children }: { children: React.ReactNode }) {
  const controls = usePlayer(selectControls);
  if (!controls) return null;

  return (
    <div style={{ opacity: controls.visible ? 1 : 0 }}>
      {children}
    </div>
  );
}

import { createPlayer, MediaElement, selectControls } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

const { PlayerController, context } = createPlayer({ features: videoFeatures });

class ControlsOverlay extends MediaElement {
  readonly #controls = new PlayerController(this, context, selectControls);
}

API Reference

Parameters

Parameter	Type	Default
`state*`	`object`	`—`

Return Value

MediaControlsState | undefined