useMediaInstance

Hook that owns a media instance within the current Player

Import

import { useMediaInstance } from "@videojs/react";

Usage

Pass a media class to create one instance and attach it to the surrounding player.

import { HlsJsMedia } from "@videojs/media/dom/hls-js";
import { useAttachMedia, useMediaInstance } from "@videojs/react";

function CustomHlsVideo() {
  const media = useMediaInstance(HlsJsMedia);
  const attachRef = useAttachMedia(media);

  return <video ref={attachRef} />;
}

The optional setup callback runs before attachment. On real unmount, the hook only clears the player when it still owns the active media, then destroys the instance and its registered media components.

API Reference

Parameters

Parameter	Type	Default
`MediaClass*`	`function`	`—`
Description Media class to instantiate and attach to the current player. Type `(() => Instance)`
`setup`	`function`	`—`
Description Optional callback run once before the instance is attached. Type `((media: Instance) => void)`

Return Value

Instance