useMedia

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

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. To register a custom media element instead of the built-in components, see useMediaRegistration .

Examples

Basic Usage

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

import './BasicUsage.css';

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

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

.react-use-media-basic {
  position: relative;
}

.react-use-media-basic video {
  width: 100%;
}

.react-use-media-basic__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 12px;
  background: rgba(0, 0, 0, 0.05);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 0.8125rem;
}

.react-use-media-basic__info div {
  display: flex;
  gap: 8px;
}

.react-use-media-basic__info dt {
  color: #6b7280;
  min-width: 80px;
}

.react-use-media-basic__info dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

API Reference

Return Value

Media | null