Core

Provider

This component is used as a render target for the current provider.

The media provider component gives you complete control of where the provider will be rendered in the DOM. For example, the VideoProvider or HLSProvider will render the HTML <video> element inside of it, and the AudioProvider will render the <audio> element.

In a typical video player setup, you’ll place the provider directly in the player and overlay some UI (e.g., controls) over it like so:

import { MediaProvider, type MediaProviderProps } from "@vidstack/react";

<MediaPlayer src="...">
  <MediaProvider />
</MediaPlayer>

import { MediaProvider, MediaProviderInstance } from "@vidstack/react"

const ref = useRef<MediaProviderInstance>(null),
  { /* state props */ } = useStore(MediaProviderInstance, ref);

<MediaProvider ref={ref}>

import { MediaProvider, type MediaProviderInstance } from "@vidstack/react"

const ref = useRef<MediaProviderInstance>(null);

useEffect(() => { /* Use props/methods here. */ }, [])

<MediaProvider ref={ref}>