Skip to content
FrameworkStyle

useAttachMedia

Hook that attaches an HTML media element to a playback adapter

Import

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

Usage

Pass a playback adapter to receive a callback ref for its rendered <video> or <audio> 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 a non-null element and detaches the host when React clears or cleans up the ref.

API Reference

Parameters

ParameterTypeDefaultDetails
media*EngineAdapter—

Return Value

RefCallback<T>