SPDN SDK — Video.js Demo

Video.js 7 + hls.js + /sdk/spdn-p2p.js — with a 25-line inline source handler that we register at priority 0 (above VHS). HLS sources go through hls.js, which SPDN hooks into for P2P delivery.
Player
idle
Status
0.0 MB
↓ via P2P
0.0 MB
↓ via Origin
Configuration
How this works: Vanilla Video.js uses VHS (its built-in HLS engine) which SPDN cannot hook into. We register a custom Video.js source handler at priority 0 — above VHS — so HLS sources route through hls.js instead. The hls.js instance is exposed as tech.hlsjs, which SPDN then attaches to.
Copy-paste snippet (Video.js 7 + inline source handler + SPDN)
<link rel="stylesheet" href="https://vjs.zencdn.net/7.21.5/video-js.css">
<script src="https://vjs.zencdn.net/7.21.5/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@1.5.13/dist/hls.min.js"></script>
<script src="https://spdn.tv/sdk/spdn-p2p.js"></script>

<video-js id="player" class="video-js" controls></video-js>

<script>
  // 1. Register a custom Video.js source handler at priority 0.
  //    Puts hls.js ABOVE VHS for HLS sources — SPDN can then attach.
  videojs.getTech("Html5").registerSourceHandler({
    name: "spdn-hlsjs",
    canHandleSource: src => /\.m3u8(\?|$)/i.test(src.src) ? "probably" : "",
    handleSource: function (source, tech) {
      const hls = new Hls();
      hls.attachMedia(tech.el());
      hls.loadSource(source.src);
      tech.hlsjs = hls;
      return { dispose: () => hls.destroy() };
    }
  }, 0);

  // 2. SPDN session + player.
  const spdn = new SPDN({
    token:    "spdn_app_YOUR_TOKEN_HERE",
    streamId: "your-stream-id"
  });
  spdn.ready.then(() => {
    const player = videojs("player");
    player.src({ src: "https://your-cdn.com/live.m3u8", type: "application/x-mpegURL" });
    const wait = setInterval(() => {
      const hls = player.tech({IWillNotUseThisInPlugins:true}).hlsjs;
      if (hls) { spdn.attachToHls(hls); clearInterval(wait); }
    }, 100);
  });
</script>
Diagnostic Log
--:--:--idle — paste a token and hit Start.