https://worker.antcdn.net/live/{edgeId}/master.m3u8

1
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
2

3
<video id="player" controls></video>
4

5
<script>
6
  const video = document.getElementById('player');
7
  const src = 'https://worker.antcdn.net/live/{edgeId}/master.m3u8';
8

9
  if (Hls.isSupported()) {
10
    const hls = new Hls({ lowLatencyMode: false });
11
    hls.loadSource(src);
12
    hls.attachMedia(video);
13
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
14
    // Safari — native HLS
15
    video.src = src;
16
  }
17
</script>

import { useEffect, useRef } from 'react';
import Hls from 'hls.js';

export function LivePlayer({ edgeId }: { edgeId: string }) {
  const videoRef = useRef<HTMLVideoElement>(null);
  const src = `https://worker.antcdn.net/live/${edgeId}/master.m3u8`;

  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;

    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(src);
      hls.attachMedia(video);
      return () => hls.destroy();
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = src;
    }
  }, [src]);

  return <video ref={videoRef} controls style={{ width: '100%' }} />;
}

1
<link href="https://vjs.zencdn.net/8/video-js.css" rel="stylesheet" />
2
<script src="https://vjs.zencdn.net/8/video.min.js"></script>
3

4
<video id="player" class="video-js vjs-default-skin" controls>
5
  <source
6
    src="https://worker.antcdn.net/live/{edgeId}/master.m3u8"
7
    type="application/x-mpegURL"
8
  />
9
</video>
10

11
<script>
12
  videojs('player', { fluid: true });
13
</script>

1
async function waitForLive(streamId, apiKey) {
2
  while (true) {
3
    const res = await fetch(
4
      `https://api.antcdn.net/v1/live-streams/${streamId}`,
5
      { headers: { Authorization: `Bearer ${apiKey}` } }
6
    );
7
    const stream = await res.json();
8
    if (stream.state === 'live') return stream.playback.hlsUrl;
9
    if (stream.state === 'ended' || stream.state === 'error') throw new Error(stream.state);
10
    await new Promise(r => setTimeout(r, 3000));
11
  }
12
}