selectControls

Select the controls state slice from the player store

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

The returned state includes whether controls are visible and whether the user is active (interacting with the player).

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

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 } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';
import { selectControls } from '@videojs/core/dom';

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

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

API Reference

Parameters

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

Return Value

MediaControlsState | undefined