FrameworkStyle

Player.useMedia

Hook to access the underlying media element from within a Player.Provider

Player.useMedia returns the current HTMLMediaElement (or null if no media element has been registered yet). Use it to interact directly with the native media element when needed. It must be called within a Player.Provider. The media element becomes available after a <Video> or <Audio> component mounts inside the provider tree. Also available as a standalone import (import { useMedia } from '@videojs/react') — identical behavior, no typing difference. To register a custom media element instead of the built-in components, see useMediaRegistration.

Examples

Basic Usage 

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

import './BasicUsage.css';

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

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

  if (!media) return null;

  return (
    <dl className="react-use-media-basic__info">
      <div>
        <dt>tagName</dt>
        <dd>{media.tagName.toLowerCase()}</dd>
      </div>
      <div>
        <dt>src</dt>
        <dd>{media.currentSrc || '—'}</dd>
      </div>
      <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="react-use-media-basic">
        <Video
          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
          autoPlay
          muted
          playsInline
          loop
        />
        <MediaInfo />
      </Player.Container>
    </Player.Provider>
  );
}

API Reference

Return Value

Media | null