Overview

Playback options: drop-in components across React, Svelte, and Web Components, or raw protocol URLs for HLS, LL-HLS, DASH, WebRTC/WHEP, Mist WebRTC, MP4, WebM/MKV, AAC, TS, H264, WebSocket outputs, and direct RTMP/RTSP/SRT/DTSC when exposed.

Packages

Package	Use Case
`@livepeer-frameworks/player-react`	React 17+ apps
`@livepeer-frameworks/player-svelte`	Svelte 5 apps
`@livepeer-frameworks/player-wc`	Web Components — Vue, Angular, CDN, plain HTML
`@livepeer-frameworks/player-core`	Vanilla JS, headless, or building custom integrations

React Integration

Svelte Integration

Web Components

Vanilla JS

Not sure which package to use? See the Integration Guide.

Key Features

Adaptive bitrate (ABR) — resize-aware and bitrate-aware quality switching.
Gateway integration — edge node resolution via the GraphQL API, no manual URL juggling.
Lazy-loaded transports — heavy engines load on demand to keep the initial bundle small.
Protocol coverage — HLS, LL-HLS, DASH, WebRTC/WHEP, WebSocket, MP4, and direct protocols when exposed.

For the underlying engine selection and protocol scoring, see Playback Advanced.

Where to Find Your Playback URLs

Your Playback ID is shown in the FrameWorks dashboard under Playback Info. This ID is public-safe.

Primary Protocols:

URL Pattern	Protocol	Description
`/play/{id}/hls/index.m3u8`	HLS (TS)	Best compatibility — browsers, mobile, smart TVs
`/play/{id}/cmaf/index.m3u8`	LL-HLS	Lower latency HLS variant
`/play/{id}/cmaf/index.mpd`	DASH	MPEG-DASH adaptive streaming
`/play/{id}/webrtc`	WebRTC (WHEP)	Ultra-low latency (~0.5s)
`/play/{id}.mp4`	MP4	Progressive download
`/play/{id}.webm`	WebM	Open format (VP8/VP9)

# Example URLs through Foghorn
https://foghorn.frameworks.network/play/{playback-id}/hls/index.m3u8
https://foghorn.frameworks.network/play/{playback-id}/webrtc
https://foghorn.frameworks.network/play/{playback-id}.mp4

Content Identifiers

Content Type	Identifier	Example
Live Stream	`playbackId` (view key)	`abc123def456`
Clip	`clipHash` (32-char hash)	`f8a2b3c4d5e6...`
DVR Recording	`dvrHash` (32-char hash)	`a1b2c3d4e5f6...`

All content types use the same unified /play/{id} path through Foghorn.

Quick Start

import { Player } from "@livepeer-frameworks/player-react";

<Player
  contentType="live"
  contentId="<YOUR_PLAYBACK_ID>"
  options={{
    autoplay: true,
    muted: true,
  }}
/>;

Where to Resolve From

Call resolveViewerEndpoint from the viewer’s browser or playback device when you want geographic routing to reflect that viewer. The FrameWorks player does this for you: the browser calls Gateway GraphQL, Gateway forwards the request IP to Foghorn, and Foghorn uses that IP for GeoIP and edge scoring.

Do not call resolveViewerEndpoint from your application backend unless you intentionally want routing based on the backend’s IP address. Backend-side resolution cannot know where the final viewer is unless your infrastructure preserves and trusts the viewer IP all the way to Gateway.

For custom players that do not use the FrameWorks player, use the playback DNS name directly. Paid tenants should prefer their tenant playback domain:

https://foghorn.{tenant}.cdn.{base}/play/{playback-id}/hls/index.m3u8

That tenant domain spans every subscribed delivery pool: FrameWorks platform-official clusters, private clusters, and marketplace clusters. If a tenant alias is not available, use the global root playback domain, then the cluster-concrete Foghorn domain shown in the dashboard. HTTP playback URLs can go through /play because Foghorn can return JSON or issue a 307 redirect from the viewer’s request.

Universal Playback URLs (`/play`)

/play is a redirect + resolver endpoint for direct protocol URLs and CLI tools. It returns 307 redirects to edge nodes.

# Play in VLC
vlc https://foghorn.frameworks.network/play/abc123def/hls/index.m3u8

# Embed in HTML (Safari, iOS)
<video src="https://foghorn.frameworks.network/play/abc123def/hls/index.m3u8" controls></video>

# Record with ffmpeg
ffmpeg -i https://foghorn.frameworks.network/play/abc123def/hls/index.m3u8 -c copy output.mp4

JSON Response (Custom Players)

curl https://foghorn.frameworks.network/play/{view-key}

Returns all available protocols, primary and fallback nodes:

{
  "primary": {
    "node_id": "edge-7",
    "base_url": "https://edge-egress.frameworks.network",
    "outputs": {
      "HLS": {"url": "https://foghorn.frameworks.network/play/stream-id/hls/index.m3u8"},
      "WHEP": {"url": "https://foghorn.frameworks.network/play/stream-id/webrtc"}
    }
  },
  "fallbacks": [...]
}

Additional Protocols

URL Pattern	Protocol	Description
`srt://<host>:<port>?streamid={id}`	SRT	Secure Reliable Transport
`rtsp://<host>:<port>/play/{id}`	RTSP	IP cameras, VLC, ffmpeg
`rtmp://<host>:<port>/play/{id}`	RTMP	Legacy Flash players
`/play/{id}.ts`	MPEG-TS	Transport stream
`/play/{id}.flv`	FLV	Flash Video
`/play/{id}.mkv`	MKV	Matroska container
`/play/{id}.aac`	AAC	Audio-only stream

DVR Archive Playback

Use the DVR playbackId with contentType="dvr" for the active live DVR window (the rolling seek-back surface of an actively recording stream). For historical replay, list the recording’s chapters via the dvrChapters query — each finalized chapter has its own public playbackId that addresses a regular VOD-shaped artifact. Hand that chapter playbackId to your player exactly the way you would for any VOD; a 90-day recording is navigated one chapter at a time instead of as one giant playlist.

See Recordings, Clips & VOD and DVR Chapters for the 24/7 DVR model.

Multi-Cluster Playback

In multi-cluster deployments, Foghorn handles cross-cluster routing transparently. When a viewer requests a stream from a remote cluster, Foghorn arranges origin-pull replication or redirects via HTTP 307.

The player SDK handles this automatically when it runs in the viewer’s browser or playback device: Gateway resolution returns the right Foghorn-backed edge endpoints for that viewer’s region.

Using Other Players

hls.js

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video" controls></video>
<script>
  const video = document.getElementById("video");
  const hlsUrl = "https://foghorn.frameworks.network/play/{playback-id}/hls/index.m3u8";
  if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource(hlsUrl);
    hls.attachMedia(video);
  } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
    video.src = hlsUrl;
  }
</script>

Video.js

<link href="https://vjs.zencdn.net/8.0.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/8.0.4/video.min.js"></script>
<video-js id="my-video" class="video-js" controls data-setup="{}">
  <source src="https://foghorn.frameworks.network/play/{playback-id}/hls/index.m3u8" type="application/x-mpegURL" />
</video-js>

Troubleshooting

Stream Not Found

Is the stream live? HLS playlists and WHEP endpoints are only active while broadcasting.
Check the ID: Use the Playback ID, not the Stream Key.

Buffering or Stuttering

Viewer connection: Insufficient bandwidth for the source bitrate.
Source bitrate: Encoder pushing too high for upload/download speeds.

Autoplay Issues (No Audio)

Browser policies: Most browsers block autoplay with sound. Set muted={true} for autoplay. The player shows a “Click to Unmute” overlay.

High Latency

Protocol choice: HLS has 10-30s latency. Use WebRTC (WHEP) for sub-second latency.