Poster
The Poster component displays a visual placeholder for media content prior to playback.
When used with Livepeer’s playback info API, getSrc will automatically parse
any available thumbnail images in the JSON response and pass them to Poster.
The example above assumes that the playback info has a “Thumbnail (JPEG)”
source.
Features
- Displays a preview image as a placeholder while media is loading
- Conditionally renders based on the availability of a thumbnail image
Anatomy
Import the components and piece the parts together.
import * as Player from "@livepeer/react/player";
export default () => (
<Player.Root>
<Player.Container>
<Player.LoadingIndicator>
<Player.Poster />
</Player.LoadingIndicator>
</Player.Container>
</Player.Root>
);
Props
Poster accepts all typical HTML img props.
It is usually used alongside a Player.Video with poster set to null, so
that the default poster URL is not parsed and set on the HTML5 video element.
It can be composed with custom img renderers, like Next.js Image, with the
asChild prop, so you can customize the image loading to go through your
optimization pipeline.
forceMount
Ensures consistent presence in the DOM, aiding in the smooth application of animations.
src
Specifies the URL for the poster image, allowing for a customized preview. If not set, the component attempts to retrieve a poster from the media’s context.
Data Attributes
data-livepeer-poster
Identifies the poster component within the Player.
data-visible
Signifies if the poster is visible ("true") or hidden ("false"), useful for
CSS-based animations.