Configuration

Both web SDKs (hls.js and Shaka) share the same constructor API.

Constructor

const player = new XStreamsPlayerShaka({   // or XStreamsPlayerHlsjs
  container:     document.getElementById('player'),  // Required. DOM element.
  streamId:      'your-stream-id',                   // Required. Stream UUID.
  tokenEndpoint: 'https://api.yoursite.com/api/v1/ssai/{id}/token/',  // Required.
  options: {
    // All options below are optional.
    title:         'My Stream',       // Top-bar label. Default: 'Live Stream'
    workerBaseUrl: 'https://...',     // Cloudflare Worker URL for ad-break polling.
    streamBaseUrl: 'https://...',     // Base URL for playlist/segment requests.

    // Auth — pick one:
    streamKey:   'sk_...',           // Stream secret key (X-Stream-Key header).
    sessionAuth: false,              // Send browser cookies instead. Default: false.
  },
});

Methods

Method	Description
player.play()	Start playback. Returns a Promise.
player.destroy()	Stop playback, clean up all resources.
player.on(event, callback)	Listen for an event.
player.off(event, callback)	Remove an event listener.

Events

Event	Payload	Description
adstarted	{ duration }	An ad break has started. duration is in seconds.
adended	—	The ad break has finished.
error	{ message }	A playback error occurred.

Authentication

You need one of these to authorize playback:

Option A: Stream Key (recommended)

Get it from Dashboard → Streams → your stream → Playback → Secret Key.

options: {
  streamKey: 'sk_abc123...',
}

The SDK sends this as an X-Stream-Key header with every request.

Option B: Session Auth

If the user is already logged in to your site and you have CORS + credentials configured:

options: {
  sessionAuth: true,
}

The SDK sends browser cookies with every request. Only works same-origin or with proper CORS headers.

Styling

The player uses CSS classes prefixed with xs- (e.g., xs-player, xs-video, xs-controls). You can override any of them in your own stylesheet.

Load order matters — always load base CSS first:

<link rel="stylesheet" href=".../xstreams-player-base.css">   <!-- shared styles -->
<link rel="stylesheet" href=".../xstreams-player-shaka.css">   <!-- edition styles -->