Prefer calling the API from your backend. CORS-enabled API keys are deprecated.
Livepeer Player (recommended)
Fetch playback info on the server, then pass the source to the Player:
import * as Player from "@livepeer/react/player";
import { getSrc } from "@livepeer/react/external";
export async function getPlaybackSource(playbackId) {
const playbackInfo = await livepeer.playback.get(playbackId);
return getSrc(playbackInfo.playbackInfo);
}
export function AssetPlayer({ src }) {
return (
<Player.Root src={src}>
<Player.Container>
<Player.Video />
<Player.Controls><Player.PlayPauseTrigger /></Player.Controls>
</Player.Container>
</Player.Root>
);
}
Custom player
Call the Playback Info API with the playback ID. Use the returned HLS or MP4 URLs in any player that supports them. Short assets (under ~2 min) often have MP4 renditions for fast start.
Embed
<iframe src="https://lvpr.tv?v=PLAYBACK_ID" allowfullscreen allow="autoplay" frameborder="0"></iframe>
&muted=false, &autoplay=false, &loop=true. See Play a livestream for stream-specific options.
