The Container component acts as the container div element for the Player, using either @radix-ui/react-aspect-ratio or a standard div element. It selectively renders one of these based on the presence of an aspectRatio prop. We show above how to disable the aspect ratio element.

Features

  • Provides an aspect ratio container to reduce Cumulative Layout Shift
  • Dynamic data attributes for custom styling based on the current media state

Anatomy

Import the components and piece the parts together.

import * as Player from "@livepeer/react/player";

export default () => (
  <Player.Root>
    <Player.Container>
      {/* Place child elements here, like Video and Controls */}
    </Player.Container>
    {/* Or place other controls outside of here, to not be bound by the aspect ratio Container */}
  </Player.Root>
);

Data Attributes

These attributes are dynamically updated based on the current state.

data-livepeer-aspect-ratio or data-livepeer-wrapper

Indicates the container type. It’s present if the container is an aspect ratio container (with data-livepeer-aspect-ratio) or a regular div (with data-livepeer-wrapper).

When aspectRatio is set to null on the Root component, then it will be a regular div wrapper with position: relative.

data-fullscreen

Reflects whether the content is in fullscreen mode.

  • "true": The content is in fullscreen mode.
  • "false": The content is not in fullscreen mode.

data-playing

Indicates if the content is currently playing.

  • "true": The content is playing.
  • "false": The content is not playing.

data-can-play

Shows if the content can be played.

  • "true": The content can be played.
  • "false": The content cannot be played due to some restrictions or lack of data.

data-playback-rate

Displays the current playback rate.

  • "normal": The playback is at normal speed.
  • "fast": The playback is at a speed faster than normal.
  • "slow": The playback is at a speed slower than normal.
  • "constant": The playback rate is constant (neither fast nor slow).

data-error

Indicates if there is an error in the content.

  • "true": There is an error in the content.
  • "false": There are no errors in the content.

data-loading

Shows if the content is loading.

  • "true": The content is loading.
  • "false": The content is not loading.

data-live

Indicates if the content is live.

  • "true": The content is live.
  • "false": The content is not live.

data-has-played

Reflects if the content has been played.

  • "true": The content has been played at least once.
  • "false": The content has not been played yet.

data-controls-hidden

Shows if the controls are hidden.

  • "true": The controls are hidden.
  • "false": The controls are visible.

data-picture-in-picture

Indicates if the picture-in-picture mode is active.

  • "true": The picture-in-picture mode is active.
  • "false": The picture-in-picture mode is not active.

data-video-quality

Displays the current video quality, directly reflecting the videoQuality value from the state. It can be a string indicating the quality level (e.g., "720p", "1080p").