In this guide, we demonstrate how to play back assets in your application.
We do not recommend using “CORS-enabled” API
keys - they will be deprecated in an
upcoming release. We recommend making requests from your backend to the
Livepeer Studio API. Using the Livepeer React Player
The example below shows how to use the Livepeer React
Player to view a video asset, with some custom
styles to demonstrate what’s possible.
Play Video
This guide assumes you have configured a Livepeer JS SDK client with an API key.
We can use the Player with a playbackId, which we
created previously when uploading a video asset.
import * as Player from "@livepeer/react/player";
import { getSrc } from "@livepeer/react/external";
import Image from "next/image";
const playbackId = "f5eese9wwl88k4g8";
// fetch the playback info on the server, using React Server Components
// or regular API routes
export const getPlaybackSource = () => {
const playbackInfo = await livepeer.playback.get(playbackId);
const src = getSrc(playbackInfo.playbackInfo);
return src;
};
// pass the parsed playback info Src[] into the player
export const DemoPlayer = ({ src }: { src: Src[] | null }) => {
return (
<Player.Root src={src}>
<Player.Container>
<Player.Video />
<Player.Controls className="flex items-center justify-center">
<Player.PlayPauseTrigger className="w-10 h-10">
<Player.PlayingIndicator asChild matcher={false}>
<PlayIcon />
</Player.PlayingIndicator>
<Player.PlayingIndicator asChild>
<PauseIcon />
</Player.PlayingIndicator>
</Player.PlayPauseTrigger>
</Player.Controls>
</Player.Container>
</Player.Root>
);
};
Using your own player
Using Livepeer UI Kit is the recommended way to play back an asset - it
handles prioritizing HLS & MP4 renditions, errors from the API, and is
composable to allow advanced video apps without writing a custom integration.
However, if you want to use an alternative, you can do so by following the
instructions below.
Fetch the playback URL
To play back a livestream in other players, you’ll need to fetch the playback
URL(s). By default, all content has an HLS endpoint. HLS is a protocol that
allows you to stream video and audio content over HTTP.
Short-form assets will also have one or more MP4 source URLs.
Below, we show how to do this in Typescript using the
playback info API endpoint, but we have a similar
interface across all SDKs.
import { Player } from "@livepeer/react";
import Livepeer from "livepeer";
const livepeer = new Livepeer({
apiKey: process.env.YOUR_PRIVATE_API_KEY,
});
const playbackId = "f5eese9wwl88k4g8";
// fetch the playback info on the server
const playbackInfo = await livepeer.playback.get(playbackId);
// use the playbackInfo with your player
Source playback
When an asset is initially created, we will provide a “source playback” URL in
the list returned from the
playback info endpoint. This is a non-transcoded
version of the asset that can be played immediately, while processing happens in
the background. The playback info endpoint will then automatically update with
the transcoded renditions when processing is completed.
Handling various playback sources
The playback info endpoint can return multiple sources in the response. These
may include short form MP4 playback URLs, which allow you to obtain alternative
URLs for your video asset to enable applications (and CDNs) to cache short
videos for instant playback of subsequent videos. This means that viewers can
experience instant time-to-first-frame (TTFF) when watching short videos.
It is important to note that short form playback URLs are only available for
video assets that are less than 2 minutes in duration.
{
"type": "vod",
"meta": {
"source": [
{
"hrn": "MP4",
"type": "html5/video/mp4",
"url": "https://asset-cdn.lp-playback.com/hls/{PLAYBACK_ID}/static360p0.mp4",
"size": 494778,
"width": 204,
"height": 360,
"bitrate": 449890
},
{
"hrn": "MP4",
"type": "html5/video/mp4",
"url": "https://asset-cdn.lp-playback.com/hls/{PLAYBACK_ID}/static720p0.mp4",
"size": 1869154,
"width": 406,
"height": 720,
"bitrate": 1996936
},
{
"hrn": "HLS (TS)",
"type": "html5/application/vnd.apple.mpegurl",
"url": "https://livepeercdn.studio/recordings/{RECORDING_ID}/index.m3u8"
}
]
}
}
When you make a request for playback URLs, in the response MP4 URLs are always
listed before HLS URLs. Additionally, each MP4 URL includes additional
metadata about the video, such as its width, height, bitrate, and size. This
metadata can be useful for mobile applications that want to optimize playback
quality and size based on the viewer’s device and network conditions.
Use the playback URL in a player
You can use the playback URL with any video player that supports HLS. Here is a
list of popular players that support HLS:
Here is an example of how to use the playback URL in video.js player.
<head>
<link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="640"
height="264"
poster="MY_VIDEO_POSTER.jpg"
>
<source
src="https://lp-playback.com/hls/{PLAYBACK_ID}/index.m3u8"
type="application/x-mpegURL"
/>
</video>
<script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
</body>
Embeddable Player
Livepeer Studio maintains an embeddable version of the Livepeer Player that is
suitable for iframing.
If you are using React, consider using Livepeer UI Kit instead.
PLAYBACK_ID with your video’s playback id.
<iframe
src="https://lvpr.tv?v={PLAYBACK_ID}"
allowfullscreen
allow="autoplay; encrypted-media; fullscreen; picture-in-picture"
frameborder="0"
>
</iframe>
Configuration
If you are using the iframe for livestreams as well as assets, see the
livestream embed docs for how to set up low latency, clipping, and other
configs for streams.
muted and autoplay behavior with &muted=false
and/or &autoplay=false. These are set to true by default. Looping can also be
set with &loop=true.
