In this guide, we demonstrate how to embed asset or live streams in your application using a hosted version of the Livepeer Player.

If you are using React, consider using Livepeer React instead.

This is one of the easiest way to play back a video or livestream on your website/applications. You can embed the player on your website/applications by using the below code snippet.

You can replace the PLAYBACK_ID with your video’s playback id.

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

Low Latency

For livestreams, you may also specify &lowLatency=true in the query string - this will enable livestreams to play back with low-latency WebRTC. If this does not succeed in playing back (commonly due to a slow network or connectivity issues), the embeddable player will automatically fall back to HLS playback. Also, if the stream contains B-frames (or bidirectional frames, which are common for users streaming with OBS or other streaming apps), the Player will automatically fall back to HLS, so that out-of-order frames are not displayed. This only applies to users who are playing livestreams.

OBS users should be instructed to use the Livepeer Studio stream profile, or to manually turn off B-frames in their stream. See our Stream from OBS docs for more information.

Clipping

To enable clipping, &clipLength={seconds} can be passed, which will allow viewers to clip livestreams. The length in seconds must be less than 120 seconds.

Constant Playback

The embed supports “constant” playback with constant=true, which means that audio will not be distorted if the playhead falls behind the livestream. This is usually used for music applications, where audio quality/consistency is more important than latency.

Other Configs

You can also 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.