usePlayer

Hook to access the player store from within a Player Provider

usePlayer gives you access to the player store from any component within a Player Provider. It has two overloads — without arguments for direct store access, or with a selector for reactive state subscriptions. The scoped usePlayer returned from createPlayer is typed to your specific features, while the standalone export from @videojs/react returns an untyped store.

Examples

Store Access

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

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

import './StoreAccess.css';

const { Provider, Container } = createPlayer({
  features: videoFeatures,
});

function Controls() {
  const store = usePlayer();

  return (
    <div className="react-use-player-store__controls">
      <button type="button" onClick={() => store.play()}>
        Play
      </button>
      <button type="button" onClick={() => store.pause()}>
        Pause
      </button>
    </div>
  );
}

export default function StoreAccess() {
  return (
    <Provider>
      <Container className="react-use-player-store">
        <Video
          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
          autoPlay
          muted
          playsInline
          loop
        />
        <Controls />
      </Container>
    </Provider>
  );
}

.react-use-player-store {
  position: relative;
}

.react-use-player-store video {
  width: 100%;
}

.react-use-player-store__controls {
  display: flex;
  gap: 6px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.05);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.react-use-player-store__controls button {
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: white;
  cursor: pointer;
  font-size: 0.8125rem;
}

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.

Paused: true
Time: 0.0s / 0.0s

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

import './Selector.css';

const { Provider, Container } = createPlayer({
  features: videoFeatures,
});

function StateDisplay() {
  const state = usePlayer((s) => ({
    paused: s.paused,
    currentTime: s.currentTime,
    duration: s.duration,
  }));

  return (
    <dl className="react-use-player-selector__state">
      <div>
        <dt>Paused</dt>
        <dd>{String(state.paused)}</dd>
      </div>
      <div>
        <dt>Time</dt>
        <dd>
          {state.currentTime.toFixed(1)}s / {state.duration.toFixed(1)}s
        </dd>
      </div>
    </dl>
  );
}

export default function Selector() {
  return (
    <Provider>
      <Container className="react-use-player-selector">
        <Video
          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
          autoPlay
          muted
          playsInline
          loop
        />
        <StateDisplay />
      </Container>
    </Provider>
  );
}

.react-use-player-selector {
  position: relative;
}

.react-use-player-selector video {
  width: 100%;
}

.react-use-player-selector__state {
  display: flex;
  gap: 16px;
  padding: 12px;
  margin: 0;
  font-size: 0.8125rem;
  background: rgba(0, 0, 0, 0.05);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.react-use-player-selector__state div {
  display: flex;
  gap: 8px;
}

.react-use-player-selector__state dt {
  color: #6b7280;
}

.react-use-player-selector__state dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

API Reference

Without Selector

Access the player store from within a Player Provider.

Return Value

BaseStore & UnknownState

With Selector

Select a value from the player store. Re-renders when the selected value changes.

Parameters

Parameter	Type	Default
`selector*`	`function`	`—`
Description Derives a value from the player store state. Type `((state: UnknownState) => R)`

Return Value

R