Embed a Player

How to put an xStreams player on your website.

Basic embed

<!-- 1. Load styles -->
<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">

<!-- 2. Load SDK -->
<script src="https://cdn.xstreams.io/sdk/web/player-shaka@latest/xstreams-player-shaka.js"></script>

<!-- 3. Player container -->
<div id="player" style="width: 100%; aspect-ratio: 16/9;"></div>

<!-- 4. Initialize -->
<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>

Responsive sizing

The player fills its container. Control the size with CSS on the container:

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

<!-- Fixed size -->
<div id="player" style="width: 640px; height: 360px;"></div>

<!-- Fill parent -->
<div id="player" style="width: 100%; height: 100%;"></div>

Multiple players on one page

Each player needs its own container and stream ID:

<div id="player1" style="width: 48%; aspect-ratio: 16/9; display: inline-block;"></div>
<div id="player2" style="width: 48%; aspect-ratio: 16/9; display: inline-block;"></div>

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

  const p2 = new XStreamsPlayerShaka({
    container: document.getElementById('player2'),
    streamId: 'STREAM_ID_2',
    tokenEndpoint: 'https://api.yoursite.com/api/v1/ssai/STREAM_ID_2/token/',
  });

  p1.play();
  p2.play();
</script>

React / Next.js

import { useEffect, useRef } from 'react';

export function LivePlayer({ streamId }) {
  const containerRef = useRef(null);
  const playerRef = useRef(null);

  useEffect(() => {
    // Load SDK script dynamically
    const script = document.createElement('script');
    script.src = 'https://cdn.xstreams.io/sdk/web/player-shaka@latest/xstreams-player-shaka.js';
    script.onload = () => {
      playerRef.current = new window.XStreamsPlayerShaka({
        container: containerRef.current,
        streamId,
        tokenEndpoint: `/api/v1/ssai/${streamId}/token/`,
      });
      playerRef.current.play();
    };
    document.head.appendChild(script);

    return () => {
      playerRef.current?.destroy();
    };
  }, [streamId]);

  return <div ref={containerRef} style={{ width: '100%', aspectRatio: '16/9' }} />;
}

Cleanup

Always call player.destroy() when the player is no longer needed. This stops playback, cancels token refresh timers, and removes DOM elements.