The Poster
component displays a visual placeholder for media content prior to playback.
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.Poster
accepts all typical HTML img
props.
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
src
data-livepeer-poster
data-visible
"true"
) or hidden ("false"
), useful for
CSS-based animations.