Skip to content
FrameworkStyle

useMedia

Hook to access the media object from within a Player

The useMedia hook returned by 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 the matching Player. The media object becomes available after a <Video> or <Audio> component mounts inside the player tree. To attach a custom media element instead of the built-in components, see useMediaAttach.

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

Examples

Basic Usage

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

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

function MediaInfo() {
  const media = 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>
      <Container className="media-container">
        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
        <MediaInfo />
      </Container>
    </Player>
  );
}

API Reference

Return Value

Media | null