useAttachMedia

Import

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

Usage

Pass a playback adapter to receive a callback ref for its rendered <video>, <audio>, or embed <iframe> element.

import { HlsJsAdapter } from '@videojs/hlsjs-video';
import { useAttachMedia, useMediaInstance } from '@videojs/react';

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

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

The callback attaches the element it receives to the playback adapter and detaches it when the element or the adapter changes, and on unmount. A ref that only changed identity, such as a parent’s inline ref={(el) => ...} composed with this one, leaves the attachment alone.