​

Features

• Synchronizes state with the HTML5 video element
• Keyboard hotkeys (←/→ to seek, K to pause, M to toggle mute, F fullscreen, I picture-in-picture)
• Adheres to WAI-ARIA design patterns

​

Anatomy

Import the components and piece the parts together.

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

export default () => (
  <Player.Root>
    <Player.Video />
  </Player.Root>
);

​

Props

The component accepts most props suitable for a HTML5 video tag, except for src, poster, autoPlay, and preload, which are managed internally or provided explicitly through props.

​

poster

Optional. Controls the poster source. By default, it uses the thumbnail from the Root src input. Set to null to disable the default poster image from the Root src.

​

hlsConfig

Optional. Controls the HLS.js config. By default, it adds JWT or Access Token headers to HLS segment requests.

​

Data Attributes

​

data-livepeer-video

Serves to identify the component’s role within the Player.

​

data-livepeer-source-type

Indicates the type of the current source, such as “none” when there’s no source, or other types based on the media being played.

This can be of the type: "audio" | "video" | "hls" | "webrtc" | "none"