Shaka Edition

Current version: v2.1.0 (recommended)

The Shaka Edition uses Shaka Player under the hood. It supports HLS Interstitials via EXT-X-DATERANGE for ad insertion — no polling, no client-side ad logic needed.

CDN links

JS:   https://cdn.xstreams.io/sdk/web/player-shaka@2.1.0/xstreams-player-shaka.js
CSS:  https://cdn.xstreams.io/sdk/web/player-shaka@2.1.0/xstreams-player-shaka.css
Base: https://cdn.xstreams.io/sdk/web/base-css@latest/xstreams-player-base.css

Use @latest instead of @2.1.0 to always get the newest version (auto-updates).

Full example

html

<!DOCTYPE html>
<html>
<head>
  <title>Live Stream</title>
  <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@2.1.0/xstreams-player-shaka.css">
  <script src="https://cdn.xstreams.io/sdk/web/player-shaka@2.1.0/xstreams-player-shaka.js"></script>
</head>
<body>

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

<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/',
    options: {
      title: 'My Live Stream',
    },
  });

  player.on('error', (err) => console.error('Player error:', err));
  player.on('adstarted', ({ duration }) => console.log(`Ad break: ${duration}s`));
  player.on('adended', () => console.log('Ad break ended'));

  player.play();
</script>

</body>
</html>

When to use this edition

Starting a new integration (this is the recommended default).
You want the cleanest ad insertion (HLS Interstitials, no client-side logic).
You need EXT-X-DATERANGE support.

Shaka Edition ​

CDN links ​

Full example ​

When to use this edition ​

See also ​

Shaka Edition

CDN links

Full example

When to use this edition

See also