Skip to main content

Playback a video stream

This guide provides information about working with livestream playbacks. This includes working with a video player since it is required for the playback. This is covered in the following instructions and examples:

  • Understanding the playbackUrl
  • Ways to get the playback URL
  • Working with the example API requests
  • Get the playback URL through the dashboard
  • Build video players to view playback URL

About the playbackUrl​

Livepeer Studio playback URL is formatted: https://livepeercdn.com/hls/{playbackId}/index.m3u8.

Note: All sessions for a stream have the same playback URL.

Ways to Get the Playback URL​

  • Via the API (cURL or JavaScript)
  • Via the Dashboard

Get Playback URL with the GET request to the API​

Make a GET request to https://livepeer.studio/api/stream/{id}.

  • Note the value of playbackId in the response.
  • The playback URL is https://livepeercdn.com/hls/{playbackId}/index.m3u8.

cURL Method​

Request​

curl --location --request GET 'https://livepeer.studio/api/stream/{id}' \
--header 'Authorization: Bearer {api_key}'

Response​

{
  "lastSeen": 1654285662946,
  "isActive": false,
  "record": true,
  "suspended": false,
  "sourceSegments": 2041,
  "transcodedSegments": 8168,
  "sourceSegmentsDuration": 4074.216000000001,
  "transcodedSegmentsDuration": 16304.863999999987,
  "sourceBytes": 1886568720,
  "transcodedBytes": 1175130472,
  "id": "405a4ab4-9c5f-48a0-859a-4bb6445994a7",
  "kind": "stream",
  "name": "Test Stream",
  "region": "mdw",
  "userId": "eada599f-3d58-499b-ba24-c7f3faf988de",
  "profiles": [
    {
      "fps": 0,
      "name": "240p0",
      "width": 426,
      "height": 240,
      "bitrate": 250000
    },
    {
      "fps": 0,
      "name": "360p0",
      "width": 640,
      "height": 360,
      "bitrate": 800000
    },
    {
      "fps": 0,
      "name": "480p0",
      "width": 854,
      "height": 480,
      "bitrate": 1600000
    },
    {
      "fps": 0,
      "name": "720p0",
      "width": 1280,
      "height": 720,
      "bitrate": 3000000
    }
  ],
  "createdAt": 1651776454667,
  "streamKey": "405a-lacy-ynpa-dnq2",
  "ingestRate": 0,
  "playbackId": "405ag6i16yojk2un",
  "renditions": {},
  "multistream": {
    "targets": []
  },
  "outgoingRate": 0
}

JavaScript Method​

Request​

const axios = require("axios");

axios
  .get("https://livepeer.studio/api/stream/{id}", {
    headers: {
      Authorization: "Bearer {api_key}",
    },
  })
  .then((res) => {
    console.log(JSON.stringify(res.data));
  })
  .catch((error) => {
    console.log(error);
  });

Response​

Same as the cURL's method

Get the Playback URL Through the Dashboard​

  1. Log in to Livepeer Studio Dashboard
  2. Navigate to the Streams page
  3. Click on a stream name
  4. The playback URL is listed in the details section of the page.

Video player​

To build an application that plays your livestream or On Demand assets, you need to use some sort of video player compatible with the HLS protocol. There are many HLS video players out there, for example video.js or JW Player which either have built-in support or have plugins to support HLS.

Embed a video player​

You can build an embeddable player:

Note: The embeddable player is currently in beta and some elements may change as we mature the product. For a production-grade application consider using your own player, like the ones suggested above. You can also check or copy the Livepeer Player source code to get started quickly.

To make getting started easier, you can also use the Livepeer Studio embeddable player on your page. To use it, you just need to create an <iframe> element in your application with the URL pointing to the hosted player.

You only need to send it some information about what content it is supposed to play, which is made via the ?v query-string parameter, which should be set to the playbackId. Notice that this playback ID can be either a livestream or an On Demand asset and the player will figure out where to find the content to play.

Example Code​

<iframe
  src="https://lvpr.tv?v={playbackId}"
  frameborder="0"
  allowfullscreen
  allow="autoplay; encrypted-media; picture-in-picture"
  sandbox="allow-scripts">
</iframe>

Customization​

Some options can be changed in the player for better integration with your application. Those are also configured through the query-string. Some examples are:

  • autoplay: By default, the player starts playing the video automatically. This also means that the video has to start muted due to browser restrictions. To disable that use the ?autoplay=0 option. To still start the video muted, you can include &muted=1 as well.

  • loop: To repeatedly play the video in a loop, use ?loop=1. This is useful for short videos to create a continuous experience for the user.

  • theme (experimental): Use this to change the theme of the player. We currently provide the default video.js themes as options (city, fantasy, forest, and sea) e.g. ?theme=sea. By default, no theme is applied.

Warning ⚠️ The theme option is the most subject to stop working in the future as we change the underlying technology used in the player. Consider setting up your own player if you need to customize that on a production app.

Audio-only streams​

If you want to provide only the audio 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=false.