---
title: Player.usePlayer
description: Hook to access the player store from within a Player.Provider
---

import UtilReference from "@/components/docs/api-reference/UtilReference.astro";
import Demo from "@/components/docs/demos/Demo.astro";
import DocsLink from "@/components/docs/DocsLink.astro";
import FrameworkCase from "@/components/docs/FrameworkCase.astro";
import StyleCase from "@/components/docs/StyleCase.astro";
import StoreAccessDemoReact from "@/components/docs/demos/use-player/react/css/StoreAccess";
import storeAccessReactTsx from "@/components/docs/demos/use-player/react/css/StoreAccess.tsx?raw";
import storeAccessReactCss from "@/components/docs/demos/use-player/react/css/StoreAccess.css?raw";
import SelectorDemoReact from "@/components/docs/demos/use-player/react/css/Selector";
import selectorReactTsx from "@/components/docs/demos/use-player/react/css/Selector.tsx?raw";
import selectorReactCss from "@/components/docs/demos/use-player/react/css/Selector.css?raw";

`Player.usePlayer` (from <DocsLink slug="reference/create-player">`createPlayer`</DocsLink>) gives you access to the player store from any component within a `Player.Provider`. It's typed to the features you passed to `createPlayer`, and has two overloads — without arguments for direct store access, or with a selector for reactive state subscriptions.

`usePlayer` is also available as a standalone import (`import { usePlayer } from '@videojs/react'`), but the standalone version returns an untyped `UnknownStore`. Pass a premade selector to recover typing:

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

usePlayer();               // UnknownStore (state: unknown)
usePlayer(selectPlayback); // PlaybackState | undefined
```

## Examples

### Store Access

Call `Player.usePlayer()` without arguments to get the store instance. Use this for imperative actions like play, pause, and volume changes. The component does not re-render on state changes.

<FrameworkCase frameworks={["react"]}>
  <StyleCase styles={["css"]}>
    <Demo
      files={[
        { title: "App.tsx", code: storeAccessReactTsx, lang: "tsx" },
        { title: "App.css", code: storeAccessReactCss, lang: "css" },
      ]}
    >
      <StoreAccessDemoReact client:idle />
    </Demo>
  </StyleCase>
</FrameworkCase>

### Selector Subscription

Pass a selector function to subscribe to specific state. The component re-renders when the selected value changes, using shallow equality by default.

<FrameworkCase frameworks={["react"]}>
  <StyleCase styles={["css"]}>
    <Demo
      files={[
        { title: "App.tsx", code: selectorReactTsx, lang: "tsx" },
        { title: "App.css", code: selectorReactCss, lang: "css" },
      ]}
    >
      <SelectorDemoReact client:idle />
    </Demo>
  </StyleCase>
</FrameworkCase>

<UtilReference util="usePlayer" />
