104Get started
HextaUI

Video player: Error

When the source fails, the player shows errorMessage, announces it and disables the controls that can’t work.

0:00 / --:--
import {
  VideoPlayer,
  VideoPlayerContent,
  VideoPlayerControls,
  VideoPlayerPlayButton,
  VideoPlayerSeekBar,
  VideoPlayerTime,
} from "@/components/ui/video-player"

export function VideoPlayerError() {
  return (
    <VideoPlayer
      className="max-w-md"
      errorMessage="We couldn’t load this video. Check your connection and try again."
    >
      <VideoPlayerContent
        src="https://media.w3.org/2010/05/sintel/missing.mp4"
        aria-label="Missing video"
      />
      <VideoPlayerControls>
        <VideoPlayerSeekBar />
        <VideoPlayerPlayButton />
        <VideoPlayerTime />
      </VideoPlayerControls>
    </VideoPlayer>
  )
}

Add this example

This adds the example as components/examples/video-player/error.tsx, together with the Video player component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/video-player-error.json

To add only the component, follow the Video player installation.

Props in this example

The Video player props this example sets, from the API reference.

VideoPlayer

PropTypeDefault
errorMessage
ReactNode"This video can’t be played."

Every prop is in the Video player API reference.

More Video player examples

See them all, with keyboard support and accessibility notes, on the Video player page.

Related components