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.