ReferenceFeatures

Controls

User activity and controls visibility state for the player store

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

Import

import { controlsFeature } from '@videojs/html';

The liveVideoFeatures and videoFeatures feature bundles include this feature.

API Reference

State

Property	Type	Details
`userActive`	`boolean`
Description Whether the user has recently interacted with the player.
`controlsVisible`	`boolean`
Description Whether controls should be visible.

Actions

Action	Type	Details
`requestControlsLock`	`function`
Description Keep controls visible during a sustained interaction. The returned function releases the lock. Multiple concurrent locks are supported and each release function is idempotent. Type `() => (() => void)`
`toggleControls`	`function`
Description Toggle controls visibility. Returns the new `controlsVisible` value. Type `() => boolean`

Selector

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

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

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

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