Looking for the old docs? Go here

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:

    
    
HTMLAttributes
Ref<MediaProviderInstance>

Renders the current provider at this component location.

import { MediaProvider, type MediaProviderProps } from "@vidstack/react";
<MediaPlayer src="...">
  <MediaProvider />
</MediaPlayer>
PropTypeDefault
loaders
object
undefined
iframeProps
IframeHTMLAttributes<HTMLIFrameElement>
undefined
mediaProps
HTMLAttributes<HTMLMediaElement>
undefined
children
ReactNode
null
import { MediaProvider, MediaProviderInstance } from "@vidstack/react"

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

<MediaProvider ref={ref}>
PropTypeDefault
loader
object
null
import { MediaProvider, type MediaProviderInstance } from "@vidstack/react"

const ref = useRef<MediaProviderInstance>(null);

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

<MediaProvider ref={ref}>
PropType
state
MediaProviderState
load
method
subscribe
method

Previous