Quick Start

Get a live stream playing on your website in under 5 minutes.

What you need

An xStreams account with at least one active stream.
Your stream ID (find it in Dashboard → Streams → click your stream → the ID is in the URL).
Your API base URL (e.g., https://api.yoursite.com).

Step 1: Add the script and CSS

Paste this into your HTML <head>:

html

<link rel="stylesheet" href="https://cdn.xstreams.io/sdk/web/base-css@latest/xstreams-player-base.css">
<link rel="stylesheet" href="https://cdn.xstreams.io/sdk/web/player-shaka@latest/xstreams-player-shaka.css">
<script src="https://cdn.xstreams.io/sdk/web/player-shaka@latest/xstreams-player-shaka.js"></script>

Step 2: Add a container

Put this where you want the player to appear:

html

<div id="player" style="width: 100%; aspect-ratio: 16/9;"></div>

Step 3: Initialize the player

Add this script at the bottom of your page:

html

<script>
  const player = new XStreamsPlayerShaka({
    container: document.getElementById('player'),
    streamId: 'YOUR_STREAM_ID',
    tokenEndpoint: 'https://api.yoursite.com/api/v1/ssai/YOUR_STREAM_ID/token/',
  });

  player.play();
</script>

Replace YOUR_STREAM_ID with your actual stream ID.

That's it

The player will connect, fetch a playback token, and start playing your live stream. It handles quality switching, token refresh, and ad breaks automatically.

Next steps

Configuration options — title, auth methods, event listeners
Playback protection — secure your streams
Ad breaks — set up pre-roll and mid-roll ads
hls.js Edition — alternative player engine

Quick Start ​

What you need ​

Step 1: Add the script and CSS ​

Step 2: Add a container ​

Step 3: Initialize the player ​

That's it ​

Next steps ​

Quick Start

What you need

Step 1: Add the script and CSS

Step 2: Add a container

Step 3: Initialize the player

That's it

Next steps