FrameworkStyle

usePlayer

Hook to access the player store from within a Player Provider

Import 

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

Usage

usePlayer has two overloads:

Store access (no subscription) — returns the store instance without subscribing to changes. Use this to access actions or manually subscribe. 

function Controls() {
  const store = usePlayer();
  // Access actions like store.setVolume, store.play, etc.
}

Selector-based subscription — returns the selected value and re-renders when it changes (using shallow equality). 

function PlayButton() {
  const paused = usePlayer((s) => s.paused);
  return <button>{paused ? 'Play' : 'Pause'}</button>;
}

usePlayer must be called within a Player Provider created by createPlayer. The scoped usePlayer returned from createPlayer is typed to the specific store, while the standalone export from @videojs/react returns an untyped store.

Examples

Basic Usage

Actions
State
Paused
true
Time
0.0s
Volume
100%
 
import { createPlayer, features } from '@videojs/react';
import { Video } from '@videojs/react/video';

import './BasicUsage.css';

const Player = createPlayer({ features: [...features.video] });

function Actions() {
  const store = Player.usePlayer();

  return (
    <div className="react-use-player-basic__actions">
      <span className="react-use-player-basic__heading">Actions</span>
      <div className="react-use-player-basic__buttons">
        <button type="button" onClick={() => store.play()}>
          Play
        </button>
        <button type="button" onClick={() => store.pause()}>
          Pause
        </button>
        <button type="button" onClick={() => store.changeVolume(0.5)}>
          50% Volume
        </button>
      </div>
    </div>
  );
}

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

  return (
    <dl className="react-use-player-basic__state">
      <span className="react-use-player-basic__heading">State</span>
      <div>
        <dt>Paused</dt>
        <dd>{String(state.paused)}</dd>
      </div>
      <div>
        <dt>Time</dt>
        <dd>{state.currentTime.toFixed(1)}s</dd>
      </div>
      <div>
        <dt>Volume</dt>
        <dd>{Math.round(state.volume * 100)}%</dd>
      </div>
    </dl>
  );
}

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

API Reference

Overload 1

Access the player store from within a Player Provider.

Return Value

UnknownStore

Overload 2

Parameters

Parameter Type Default
selector* ((state: UnknownState) => R) —

Return Value

R

VideoJS