Skip to main content

Playback a video

To playback your live or on demand video inside your application you'll need to use a video player component that supports the HLS protocol.

HLS is a standard protocol for streaming video over the internet. Most of the videos you watch on the internet, both live video and on-demand video is delivered over HLS. Livepeer delivers your videos in this standard format.

While there are many HLS video players out there, we recommend using livepeer.js.

Step 1: Get the playbackId​

Get the playbackId of an existing asset. The playbackId can be found in the response object of any API call working with assets. If you haven't created an asset yet, you can follow the upload a video asset guide to do so.

Step 2: Use the playbackId in a player​

Once we have the playbackId we can use it in a player. We recommend using livepeer.js but any HLS video player will work. 

import { Player } from '@livepeer/react';
 
function App() {
  return (
    <Player
      title="Example Video"
      playbackId={playbackId}
    />
  );
}

Audio-only streams​

If you want to provide only the audio version of the stream, you can use ?video=false at the end of an .m3u8 URL to get an audio-only stream. For example, https://livepeercdn.com/hls/{playbackId}/index.m3u8?video=none