Display

Poster

This component is used to display a media poster or thumbnail image, generally before playback begins.

API Reference

HTMLAttributes<HTMLImageElement>

Ref<HTMLImageElement>

Loads and displays the current media poster image. By default, the media provider's loading strategy is respected meaning the poster won't load until the media can.

import { Poster, type PosterProps } from "@vidstack/react";import { Poster, type PosterProps } from "@vidstack/react"; <MediaPlayer>
  <MediaProvider>
    <Poster src="..." alt="..." />
  </MediaProvider>
</MediaPlayer> <MediaPlayer>
  <MediaProvider>
    <Poster src="..." alt="..." />
  </MediaProvider>
</MediaPlayer> 

Props

Prop	Type	Default
`alt`	`string`	`undefined`
`asChild`	`boolean`	`false`
`children`	`ReactNode`	`null`
`src`	`string`	`undefined`

Data Attributes

Name	Description
`data-visible`	Whether poster image should be shown.
`data-loading`	Whether poster image is loading.
`data-error`	Whether an error occurred loading poster.
`data-hidden`	Whether poster has no src or has failed to load.

Poster

API Reference

Props

`alt`

`asChild`

`children`

`src`

Data Attributes

`data-visible`

`data-loading`

`data-error`

`data-hidden`