ReferenceLayout

Player

The state boundary — creates a store and broadcasts it to all descendants.

The Player is the state boundary of your player. It creates a store and makes it available to every component inside it via context. Every player needs exactly one.

import { Video, videoFeatures } from '@videojs/react/video';
import { Container, createPlayer } from '@videojs/react';

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

function App() {
  return (
    <Player>
      {/* Everything inside can access the player store */}
      <Container>
        <Video src="video.mp4" />
      </Container>
    </Player>
  );
}

How it’s created

Call createPlayer() with a features array. It returns Player, usePlayer, and useMedia. Import the shared Container separately when building a custom layout.

import { Container, createPlayer } from '@videojs/react';
import { videoFeatures } from '@videojs/react/video';

const { Player, usePlayer, useMedia } = createPlayer({
  features: videoFeatures,
});

The features you pass determine what state is available in the store. videoFeatures is a preset that includes playback, volume, fullscreen, and other standard video controls.

createPlayer reference

What lives inside it

Everything that needs player state goes inside Player: skins, containers, UI components, and your own custom components. Anything inside can access the store.

<Player>
  <VideoSkin>           {/* skin — includes container + controls */}
    <Video src="..." /> {/* media element */}
  </VideoSkin>
  <MyCustomOverlay />   {/* your own component — can use usePlayer() */}
</Player>

No visual presence

Player renders no DOM element of its own — it’s purely a state wrapper. Put sizing, positioning, borders, backgrounds, and DOM measurements on the Container, not Player.

Player is the Provider half of a React Context pair, with usePlayer as its consumer, and it renders nothing. If a component needs player state, lift Player above it the way you’d lift any Provider: wrapping a page section, a route, or even your whole app in Player costs nothing visually and keeps usePlayer available wherever you need it.

Accessing state

Use usePlayer to read state or call actions from any component inside Player:

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

function PlayPauseButton() {
  const playback = usePlayer(selectPlayback);
  if (!playback) return null;

  return (
    <button onClick={() => playback.togglePaused()}>
      {playback.paused ? 'Play' : 'Pause'}
    </button>
  );
}

usePlayer reference

Extended player layouts

The player’s scope can extend beyond the fullscreen target. Playlists, transcripts, sidebars, and other supplementary UI can live inside Player but outside Container. They still have full access to the store, but they won’t go fullscreen with the video.

<Player>
  <Container>
    <Video src="video.mp4" />
    <Controls.Root>          {/* goes fullscreen with the video */}
      <Controls.Content>{/* ... */}</Controls.Content>
    </Controls.Root>
  </Container>

  <Transcript />          {/* outside container — still has store access */}
  <PlaylistSidebar />     {/* outside container — still has store access */}
</Player>