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 show 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.

DemoPlayer.tsx
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>
  );
};

Check out the Player docs for more details on the video primitives you can use to build custom viewing experiences.

​
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.

DemoPlayer.tsx
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.

If there are MP4 renditions or HLS playback available, the playback info endpoint will return:

{
  "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.

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.

This is one of the easiest ways to play back a video on your website. You can embed the player 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; 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.

You can override the default 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.

Was this page helpful?

Upload an assetListen to asset events