Core

Player

This is the top-most component in the library used to group media elements and control the flow of media state.

See the following sections for more information:

• The loading guide covers how to handle loading various media resources.
• The events guide covers the basics on how to listen and track updates.
• The state management guide covers how to read, update, and subscribe to state changes.
• The API pages cover how to interact with various player APIs and hooks.

import { MediaPlayer, type MediaPlayerProps } from "@vidstack/react";

import { MediaPlayer, type MediaPlayerProps } from "@vidstack/react";

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

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

import { MediaPlayer, MediaPlayerInstance } from "@vidstack/react"

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

<MediaPlayer ref={ref}>

import { MediaPlayer, MediaPlayerInstance } from "@vidstack/react"

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

<MediaPlayer ref={ref}>

import { MediaPlayer, type MediaPlayerInstance } from "@vidstack/react"

const ref = useRef<MediaPlayerInstance>(null);

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

<MediaPlayer ref={ref}>

import { MediaPlayer, type MediaPlayerInstance } from "@vidstack/react"

const ref = useRef<MediaPlayerInstance>(null);

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

<MediaPlayer ref={ref}>