Read-only — tracks user activity to determine when to show or hide the player controls.
Import
import { controls, selectControls } from '@videojs/react';
// or
import { controls, selectControls } from '@videojs/html';
Usage
import { createPlayer, controls } from '@videojs/react';
const Player = createPlayer({
features: [controls],
});
import { createPlayer, controls } from '@videojs/html';
const { ProviderMixin, PlayerController, context } = createPlayer({
features: [controls],
});
State
Whether the user has recently interacted with the player (mouse movement, touch, keyboard).
Whether the controls should be visible. true when the user is active or when playback is paused.
Selector
Use selectControls to subscribe to only the controls slice of 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.controlsVisible ? 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);
}
This feature is read-only. Controls visibility is derived from user activity and playback state — there are no actions to call directly.
