Display

Poster

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

1
2
3
4
5
6
7
8
9
10
11

1
2
3
4
5
6
7
8
9
10
11

1
2
3
4
5
6
7
8
9
10
11

Some server frameworks such as Astro and Next.js provide an <Image> component for creating and displaying optimized versions of local images. This can be useful when creating poster images, use the asChild property to pass in the optimized image.

import { Poster, type PosterProps } from "@vidstack/react";

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

/* Example. */
.component[data-foo] {}