FrameworkStyle

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/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
          autoPlay
          muted
          playsInline
          loop
        />
        <MediaInfo />
      </Container>
    </Provider>
  );
}

API Reference

Return Value

Media | null