xStreams

Appearance

hls.js Edition ​

Current version: v1.1.0

The hls.js Edition uses hls.js under the hood. It works on all modern browsers and uses SCTE-35 discontinuity injection for ad insertion.

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

Use @latest instead of @1.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-hlsjs@1.1.0/xstreams-player-hlsjs.css">
  <script src="https://cdn.xstreams.io/sdk/web/player-hlsjs@1.1.0/xstreams-player-hlsjs.js"></script>
</head>
<body>

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

<script>
  const player = new XStreamsPlayerHlsjs({
    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 ​

  • You already use hls.js in your app and want consistent behavior.
  • You need the broadest browser compatibility.
  • You want SCTE-35 based ad insertion.

See also ​

Live streaming infrastructure for developers.

© 2026 xStreams