Display

Poster

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

API Reference

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 { defineCustomElement, MediaPosterElement } from "vidstack/elements";

defineCustomElement(MediaPosterElement);<media-player>
  <media-poster src="..." alt="Large alien ship hovering over New York."></media-poster>
</media-player>

Props

Prop	Type	Default
`alt`	`string`	`null`
`crossOrigin`	`mixed`	`null`
`src`	`string`	`null`

State

const instance = document.querySelector("media-poster");

// Read
const { /* state props */ } = instance.state;

instance.subscribe(({ /* state props */ }) => {
  // Callback will fire when accessed state props update.
});

Prop	Type	Default
`alt`	`string`	`null`
`crossOrigin`	`string`	`null`
`error`	`object`	`null`
`hidden`	`boolean`	`false`
`img`	`object`	`null`
`loading`	`boolean`	`true`
`src`	`string`	`null`

Instance

// Get element reference to call props/methods.
const instance = document.querySelector("media-poster");

Prop	Type
`state`	`PosterState`
`subscribe`	`method`

Data Attributes

/* Example. */
media-poster[data-foo] {}

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`

`crossOrigin`

`src`

State

`alt`

`crossOrigin`

`error`

`hidden`

`img`

`loading`

`src`

Instance

`state`

Data Attributes

`data-visible`

`data-loading`

`data-error`

`data-hidden`