usePlayerContext

Import

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

Usage

usePlayerContext returns the full PlayerContextValue object, which includes the store, the current media element, and the media setter.

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

function DebugPanel() {
  const { store, media, setMedia } = usePlayerContext();

  return (
    <pre>
      {JSON.stringify({
        hasStore: !!store,
        hasMedia: !!media,
        tagName: media?.tagName,
      }, null, 2)}
    </pre>
  );
}

Throws an error if called outside a Player Provider.

Prefer higher-level hooks

For most use cases, use the focused hooks instead:

These hooks read from the same context internally. usePlayerContext exposes the raw context value — use it when you need multiple context fields in one call or when building a custom abstraction over the player context.