useAttachMedia

Hook that attaches an HTML media element to a media engine host

Import

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

Usage

Pass a media engine host to receive a callback ref for its rendered <video> or <audio> element.

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 callback attaches a non-null element and detaches the host when React clears or cleans up the ref.

API Reference

Parameters

Parameter	Type	Default	Details
`media*`	`MediaEngineHost`	`—`
Description Media engine host to attach and detach.

Return Value

RefCallback<T>