> ## Documentation Index
> Fetch the complete documentation index at: https://docs.livepeer.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Play an asset

> Learn how to play assets with Livepeer

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

<Warning>
  We do not recommend using ["CORS-enabled" API
  keys](/api-reference/overview/authentication) - they will be deprecated in an
  upcoming release. We recommend making requests from your backend to the
  Livepeer Studio API.
</Warning>

## Using the Livepeer React Player

The example below shows how to use the Livepeer React
[`Player`](/sdks/react/player/Root) to view a video asset, with some custom
styles to demonstrate what's possible.

<iframe src="https://lvpr.tv/?v=f5eese9wwl88k4g8" frameborder="0" width="100%" height="410" webkitallowFullScreen mozallowFullScreen allowFullScreen />

### Play Video

This guide assumes you have configured a Livepeer JS SDK client with an API key.
We can use the [`Player`](/sdks/react/player/Root) with a `playbackId`, which we
created previously when uploading a video asset.

```tsx DemoPlayer.tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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](/sdks/react/player/Root) for more details on the
video primitives you can use to build custom viewing experiences.

## Using your own player

<Warning>
  Using Livepeer UI Kit is the recommended way to play back an asset - it
  handles prioritizing HLS & MP4 renditions, errors from the API, and is
  composable to allow advanced video apps without writing a custom integration.
  However, if you want to use an alternative, you can do so by following the
  instructions below.
</Warning>

### 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](/api-reference/playback/get), but we have a similar
interface across all SDKs.

```tsx DemoPlayer.tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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](/api-reference/playback/get). 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.

<Info>
  It is important to note that short form playback URLs are only available for
  video assets that are less than 2 minutes in duration.
</Info>

If there are MP4 renditions or HLS playback available, the
[playback info endpoint](/api-reference/playback/get) will return:

```json theme={"theme":{"light":"github-light","dark":"dark-plus"}}
{
  "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.

<Info>
  When you make a request for playback URLs, in the response MP4 URLs are always
  listed before HLS URLs. Additionally, each MP4 URL includes additional
  metadata about the video, such as its width, height, bitrate, and size. This
  metadata can be useful for mobile applications that want to optimize playback
  quality and size based on the viewer's device and network conditions.
</Info>

### 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](https://videojs.com/)
* [Plyr.io](https://plyr.io/)
* [JW Player](https://www.jwplayer.com/html5-video-player/)
* [Bitmovin Player](https://bitmovin.com/video-player/)
* [HLS.js](https://github.com/video-dev/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.

```html theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<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.

<Warning>
  If you are using React, consider using Livepeer UI Kit instead.
</Warning>

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.

```html theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<iframe
  src="https://lvpr.tv?v={PLAYBACK_ID}"
  allowfullscreen
  allow="autoplay; encrypted-media; fullscreen; picture-in-picture"
  frameborder="0"
>
</iframe>
```

### Configuration

<Info>
  If you are using the iframe for livestreams as well as assets, see the
  livestream embed docs for how to set up low latency, clipping, and other
  configs for streams.
</Info>

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`.

<iframe src="https://lvpr.tv/?v=f5eese9wwl88k4g8" frameborder="0" width="100%" height="410" webkitallowFullScreen mozallowFullScreen allowFullScreen />