Skip to content
FrameworkStyle

Player.usePlayer

Hook to access the player store from within a Player.Provider

Player.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. Player.usePlayer is typed to the features you passed to createPlayer. It’s also available as a standalone import (import { usePlayer } from '@videojs/react'), but the standalone version returns an untyped store.

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. 

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

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

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

  return (
    <div className="controls">
      <button type="button" onClick={() => store.play()}>
        Play
      </button>
      <button type="button" onClick={() => store.pause()}>
        Pause
      </button>
    </div>
  );
}

export default function StoreAccess() {
  return (
    <Player.Provider>
      <Player.Container className="media-container">
        <Video
          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
          autoPlay
          muted
          playsInline
          loop
        />
        <Controls />
      </Player.Container>
    </Player.Provider>
  );
}

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

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

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

  return (
    <div className="flex gap-1.5 border-t border-black/10 bg-black/5 p-3">
      <button
        type="button"
        className="cursor-pointer rounded-md border border-gray-300 bg-white px-3 py-1 text-[13px]"
        onClick={() => store.play()}
      >
        Play
      </button>
      <button
        type="button"
        className="cursor-pointer rounded-md border border-gray-300 bg-white px-3 py-1 text-[13px]"
        onClick={() => store.pause()}
      >
        Pause
      </button>
    </div>
  );
}

export default function StoreAccess() {
  return (
    <Player.Provider>
      <Player.Container className="relative">
        <Video
          className="w-full"
          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
          autoPlay
          muted
          playsInline
          loop
        />
        <Controls />
      </Player.Container>
    </Player.Provider>
  );
}

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 } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';

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

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

  return (
    <dl className="panel">
      <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 (
    <Player.Provider>
      <Player.Container className="media-container">
        <Video
          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
          autoPlay
          muted
          playsInline
          loop
        />
        <StateDisplay />
      </Player.Container>
    </Player.Provider>
  );
}
Paused
true
Time
0.0s / 0.0s
 
import { createPlayer } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';

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

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

  return (
    <dl className="m-0 flex gap-4 border-t border-black/10 bg-black/5 p-3 text-[13px]">
      <div className="flex gap-2">
        <dt className="text-gray-500">Paused</dt>
        <dd className="m-0 tabular-nums">{String(state.paused)}</dd>
      </div>
      <div className="flex gap-2">
        <dt className="text-gray-500">Time</dt>
        <dd className="m-0 tabular-nums">
          {state.currentTime.toFixed(1)}s / {state.duration.toFixed(1)}s
        </dd>
      </div>
    </dl>
  );
}

export default function Selector() {
  return (
    <Player.Provider>
      <Player.Container className="relative">
        <Video
          className="w-full"
          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
          autoPlay
          muted
          playsInline
          loop
        />
        <StateDisplay />
      </Player.Container>
    </Player.Provider>
  );
}

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 Details
selector* function —

Return Value

R