Skip to content
FrameworkStyle

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.

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>