usePlayerContext

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.