Skip to main content
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 before media playback starts
  • 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";

function MediaPlayerComponent() {
  return (
    <Player.Root>
      <Player.PlayingIndicator>
        <Player.Poster />
      </Player.PlayingIndicator>
    </Player.Root>
  );
}

​
Usage

​
Props

Poster accepts all typical HTML img props.

​
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.