Player — Svelte

Installation

npm install @livepeer-frameworks/player-svelte

<script>
  import "@livepeer-frameworks/player-svelte/player.css";
</script>

Drop-in Component

<script lang="ts">
  import { Player } from "@livepeer-frameworks/player-svelte";
  import "@livepeer-frameworks/player-svelte/player.css";
</script>

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

The player resolves through the official FrameWorks Gateway from the viewer’s browser, so Foghorn routes from that viewer’s IP. Set gatewayUrl only for a fully self-hosted control plane or local Gateway preview. For backend-generated playback URLs or custom players that do not use this component, use the dashboard playback DNS URL directly.

Direct MistServer Node

<Player
  contentType="live"
  contentId="<YOUR_PLAYBACK_ID>"
  options={{ mistUrl: "https://edge-egress.eu.example.com" }}
/>

DVR and Clips

<Player contentType="dvr" contentId="pk_..." />
<Player contentType="clip" contentId="pk_..." />

Composable Controls

Pass a children snippet to replace the default controls:

<script lang="ts">
  import {
    Player,
    PlayButton,
    SkipButton,
    VolumeControl,
    TimeDisplay,
    LiveBadge,
    FullscreenButton,
    SettingsMenu,
  } from "@livepeer-frameworks/player-svelte";
  import "@livepeer-frameworks/player-svelte/player.css";
</script>

<Player contentId="pk_..." contentType="live">
  {#snippet children()}
    <div class="my-controls">
      <PlayButton />
      <SkipButton direction="back" />
      <SkipButton direction="forward" />
      <TimeDisplay />
      <LiveBadge />
      <VolumeControl />
      <SettingsMenu />
      <FullscreenButton />
    </div>
  {/snippet}
</Player>

Sub-components auto-connect to the parent <Player> via Svelte 5 context (getContext("fw-player-controller")).

Sub-Component Reference

Component	Purpose
`PlayButton`	Play/pause toggle
`SkipButton`	Skip forward/back (pass `direction="back"` or `"forward"`)
`VolumeControl`	Volume slider with mute toggle
`TimeDisplay`	Current time / duration display
`LiveBadge`	Live indicator with jump-to-live
`FullscreenButton`	Fullscreen toggle
`SettingsMenu`	Quality, speed, and track selection

Custom UI with Context

For fully custom controls inside a <Player>, use Svelte 5 context. The <Player> sets context with reactive getters — Svelte 5’s fine-grained reactivity tracks access automatically.

<script lang="ts">
  import { getContext } from "svelte";

  const pc: any = getContext("fw-player-controller");
</script>

<div class="my-custom-controls">
  <p>State: {pc?.isPlaying ? "Playing" : "Paused"}</p>
  <p>
    Time: {((pc?.currentTime ?? 0) / 1000).toFixed(1)}s /
    {((pc?.duration ?? 0) / 1000).toFixed(1)}s
  </p>

  <button onclick={() => pc?.togglePlay()}>
    {pc?.isPlaying ? "Pause" : "Play"}
  </button>
  <button onclick={() => pc?.toggleMute()}>
    {pc?.isMuted ? "Unmute" : "Mute"}
  </button>
  <input
    type="range"
    min={0}
    max={1}
    step={0.01}
    value={pc?.volume ?? 1}
    oninput={(e) => pc?.setVolume(e.currentTarget.valueAsNumber)}
  />
</div>

Then use it as children:

<script lang="ts">
  import { Player } from "@livepeer-frameworks/player-svelte";
  import CustomControls from "./CustomControls.svelte";
</script>

<Player contentId="pk_..." contentType="live">
  {#snippet children()}
    <CustomControls />
  {/snippet}
</Player>

Context Properties

The context object from getContext("fw-player-controller") provides:

Property	Type	Description
`isPlaying`	`boolean`	Whether actively playing
`isPaused`	`boolean`	Whether paused
`isMuted`	`boolean`	Whether muted
`volume`	`number`	Volume (0-1)
`currentTime`	`number`	Current playback position in milliseconds
`duration`	`number`	Total duration in milliseconds (Infinity for live)
`isFullscreen`	`boolean`	Whether in fullscreen
`isEffectivelyLive`	`boolean`	Whether live content
`isBuffering`	`boolean`	Whether buffering
`isLoopEnabled`	`boolean`	Whether loop is on
`error`	`string \| null`	Current error
`qualities`	`Quality[]`	Available quality levels

Method	Description
`togglePlay()`	Toggle play/pause
`toggleMute()`	Toggle mute
`toggleFullscreen()`	Toggle fullscreen
`toggleLoop()`	Toggle loop
`setVolume(n)`	Set volume (0-1)
`jumpToLive()`	Jump to live edge
`seek(t)`	Seek to time in milliseconds
`selectQuality(id)`	Select a quality level
`getQualities()`	Get available quality levels

Props Reference

Prop	Type	Description
`contentId`	`string`	Playback ID
`contentType`	`'live' \| 'dvr' \| 'clip' \| 'vod'`	Content type
`endpoints`	`ContentEndpoints`	Pre-resolved endpoints
`thumbnailUrl`	`string`	Poster image (pre-playback overlay). Seek-bar sprites are auto-detected.
`options`	`PlayerOptions`	Configuration options
`options.gatewayUrl`	`string`	Gateway GraphQL endpoint override
`options.mistUrl`	`string`	Direct MistServer base URL
`options.authToken`	`string`	Bearer token for Gateway GraphQL resolution
`options.playbackAuth`	`{ token: string; transport?: "query" \| "header" }`	Viewer JWT sent as `?jwt=` by default, or `Authorization: Bearer` on player-controlled transports
`options.stockControls`	`boolean`	Use browser-native video controls
`options.animatePreroll`	`boolean`	Cycle thumbnail sprite tiles as a preroll animation before playback. Default false (static poster)
`options.theme`	`string`	Theme preset
`options.themeOverrides`	`object`	Per-token theme overrides
`options.locale`	`string`	Built-in UI locale
`options.playbackMode`	`string`	Initial controls/dev-panel mode label; use the store dev-mode helper for runtime protocol preference
`onStateChange`	`function`	State transition callback