Skip to content
FrameworkStyle

Player.useMedia

Hook to access the media object from within a Player.Provider

Player.useMedia (from createPlayer) returns the current Media object (or null if no media has been registered yet). Media is a runtime-agnostic playback interface — any instance that conforms to it, including an HTMLVideoElement, can be the media. It exposes capabilities like play() and event subscription rather than assuming a native element. It must be called within a Player.Provider. The media object becomes available after a <Video> or <Audio> component mounts inside the provider tree. To attach a custom media element instead of the built-in components, see useMediaAttach.

Examples

Basic Usage 

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

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

function MediaInfo() {
  const media = Player.useMedia();

  if (!media) return null;

  return (
    <dl className="info-panel">
      {isMediaSourceCapable(media) && (
        <div>
          <dt>src</dt>
          <dd>{media.currentSrc || '—'}</dd>
        </div>
      )}
      {isMediaVideoDimensionsCapable(media) && (
        <>
          <div>
            <dt>videoWidth</dt>
            <dd>{media.videoWidth}px</dd>
          </div>
          <div>
            <dt>videoHeight</dt>
            <dd>{media.videoHeight}px</dd>
          </div>
        </>
      )}
    </dl>
  );
}

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

API Reference

Return Value

Media | null