Play an asset

In this guide, we demonstrate how to play back assets in your application.

​

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>
  );
};

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

​

Using your own player

​

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.

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.

​

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
• Plyr.io
• JW Player
• Bitmovin Player
• HLS.js (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

Livepeer Studio maintains an embeddable version of the Livepeer Player that is suitable for iframing.

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

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.