Skip to content
Welcome to the new, unified Livepeer documentation! 👋
Guides
🧑‍💻 Developing
Add a Player

Add a Player

We demonstrate below how to use either the 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.

App.tsx
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!

DemoPlayer.tsx
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 errors from the API correctly 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.

💡

Please note that to play back live streams inside your application you'll need to use a video player component that supports HLS.

Fetch the playback URL

To playback a live stream in other players, you'll need to fetch the HLS URL. HLS is a protocol that allows you to stream video and audio content over HTTP. Most of the video you watch on the web is delivered using HLS. Livepeer also 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"
      }
    ]
  }
}

The format of this payload is defined here (opens in a new tab). The url field can be used as the playback URL.

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://livepeercdn.com/asset/${PLAYBACK_ID}/video"
      type="video/mp4"
    />
  </video>
 
  <script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
</body>
QuickstartCreate a Livestream