Add a Player
We demonstrate below how to playback live or on demand videos in your application using either Livepeer.js or Video.js.
Using the Livepeer.js Player
The example below show to use the Livepeer.js Player
to view a video asset, with some custom styles to demonstrate what's possible.

Step 1: Configuring Providers
First, we create a new livepeer.js client with a gateway provider and a CORS-protected API key, as well as a theme to use for all livepeer.js React components.
import {
LivepeerConfig,
ThemeConfig,
createReactClient,
studioProvider,
} from '@livepeer/react';
import * as React from 'react';
const livepeerClient = createReactClient({
provider: studioProvider({
apiKey: process.env.NEXT_PUBLIC_STUDIO_API_KEY,
}),
});
const theme: ThemeConfig = {
colors: {
accent: 'rgb(0, 145, 255)',
containerBorderColor: 'rgba(0, 145, 255, 0.9)',
},
fonts: {
display: 'Inter',
},
};
function App() {
return (
<LivepeerConfig client={livepeerClient} theme={theme}>
<CreateAndViewAsset />
</LivepeerConfig>
);
}
Step 2: Play Video
Now that our providers are set up, we use the Player
with an IPFS CID as our playbackId
, which we created
previously when uploading a video asset and storing to IPFS. We use
Next.js Image (opens in a new tab) as our optimized poster image, but this could also
be a simple image URL.
We also override some of the custom styling to match the flow of our app!
import { Player } from '@livepeer/react';
import Image from 'next/image';
const playbackId =
'bafybeida3w2w7fch2fy6rfvfttqamlcyxgd3ddbf4u25n7fxzvyvcaegxy';
import blenderPoster from '../../public/images/blender-poster.png';
const PosterImage = () => {
return (
<Image
src={blenderPoster}
layout="fill"
objectFit="cover"
priority
placeholder="blur"
/>
);
};
export const DemoPlayer = () => {
return (
<Player
title="Waterfalls"
playbackId={playbackId}
showPipButton
showTitle={false}
aspectRatio="16to9"
poster={<PosterImage />}
controls={{
autohide: 3000,
}}
theme={{
borderStyles: { containerBorderStyle: 'hidden' },
radii: { containerBorderRadius: '10px' },
}}
/>
);
};
Using your own player
Using livepeer.js is the recommended way to play back a video or a live stream - it handles MP4 renditions, errors from the API, and is a true web3-native media player. However, if you want to use an alternative, you can do so by following the instructions below.
To ensure consistent viewer experience, we strongly recommend using a player (like the Livepeer Player) that handles choosing the correct MP4 rendition and gracefully recovers from routine RTMP reconnects through custom polling logic. In the absence of this capability, reconnects may severely degrade viewer experience and require a hard refresh to resolve, and an incorrect MP4 rendition for the screen size may be chosen.
Fetch the playback URL
To playback a live stream 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. Much of the video you watch on the web is delivered using HLS. Livepeer uses HLS to deliver video and audio content.
The playback URL format is subject to change. Do not try to create the playback URLs manually, as they may change periodically.
You can get the playback url by using the below format and replacing the
PLAYBACK_ID
with your stream or asset's playbackId
.
https://livepeer.studio/api/playback/{PLAYBACK_ID}
The API will return a JSON payload which looks like:
{
"type": "vod",
"meta": {
"source": [
{
"hrn": "HLS (TS)",
"type": "html5/application/vnd.apple.mpegurl",
"url": "https://livepeercdn.studio/recordings/{RECORDING_ID}/index.m3u8"
}
]
}
}
Please note that to play back live streams inside your application you'll need to use a video player component that supports HLS.
The format of this payload is defined here.
The url
field can be used as the playback URL.
Handling various playback sources
The playback info endpoint can return multiple sources in the response, as outlined above. 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.
These may also include WebRTC URLs for low latency livestream playback. These must be played back with our ICE servers, which are used to route traffic in restricted networking environments.
You can get the playback URLs by retrieving the playback info, replacing
PLAYBACK_ID
with your asset's playbackId:
https://livepeer.studio/api/playback/{PLAYBACK_ID}
If there are MP4 renditions or WebRTC playback available, the API will return a JSON payload similar to:
{
"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"
}
]
}
}
There are multiple renditions you can choose from, and it is up to you to decide how you want to prioritize each source for your custom player. See the Player's technical details for more information on how livepeer.js handles this.
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. The Livepeer.js Player automatically handles this. See the Player docs for more information.
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:
- Video.js (opens in a new tab)
- Plyr.io (opens in a new tab)
- JW Player (opens in a new tab)
- Bitmovin Player (opens in a new tab)
- HLS.js (opens in a new tab) (requires custom logic to wire to a video element)
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
The embeddable player is currently in beta and some elements may change as we mature the product. For a production-grade application consider using Livepeer.js instead.
This is one of the easiest way to playback a video on your website/applications. You can embed the player on your website/applications by using the below code snippet.
You can replace the PLAYBACK_ID
with your video's playback id.
<iframe
src="https://lvpr.tv?v={PLAYBACK_ID}"
allowfullscreen
allow="autoplay; encrypted-media; picture-in-picture"
sandbox="allow-same-origin allow-scripts"
>
</iframe>