# 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.

**App.tsx**

```tsx
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.

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

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

The [features](https://videojs.org/docs/framework/react/guides/features) you pass determine what state is available in the store. `videoFeatures` is a [preset](https://videojs.org/docs/framework/react/guides/presets) that includes playback, volume, fullscreen, and other standard video controls.

- [createPlayer reference](https://videojs.org/docs/framework/react/reference/api/create-player)

## 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.

```tsx
<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`](https://videojs.org/docs/framework/react/reference/components/player-container), not `Player`.

`Player` is the Provider half of a React Context pair, with [`usePlayer`](https://videojs.org/docs/framework/react/reference/api/use-player) 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`:

**PlayPauseButton.tsx**

```tsx
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](https://videojs.org/docs/framework/react/reference/api/use-player)

## 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.

```tsx
<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>
```

---

React documentation: https://videojs.org/docs/framework/react/llms.txt
All documentation: https://videojs.org/llms.txt