/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.
tech.hlsjs, which SPDN then attaches to.
<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>