usePlayerContext

usePlayerContext returns the full PlayerContextValue object for lower-level integrations that need direct access to player context fields.

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

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

  return (
    <pre>
      {JSON.stringify(
        {
          hasStore: !!store,
          hasMedia: !!media,
          hasContainer: !!container,
          hasPopupGroup: !!popupGroup,
          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.