Play an asset

In this guide, we demonstrate how to play back assets in your application using either Livepeer React or Video.js.

​

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.

​

Configuring Providers

We create a new React client and wrap the app with LivepeerConfig.

​

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 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 = "f5eese9wwl88k4g8";

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 React is the recommended way to play back a video or a livestream - 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.

​

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.

You can get the playback details for an asset by using the playback info API endpoint. The url field can be used as the playback URL.

​

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.

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.

If there are MP4 renditions or WebRTC 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. See the Player’s technical details for more information on how Livepeer React handles this.

​

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 or similar embeddings. See the guide for more details.