Watching a stream: a stream that's on plays through hls.js, held near the live edge (1.5 s back, up to 1.1× when it drifts past 5 s) — Chrome's own HLS player starts three segments back, never catches up, and fails outright (DEMUXER_ERROR_COULD_NOT_PARSE) if a page changes its speed. With the live server's 1 s segments a viewer is 3.5 s behind the broadcaster, from 8.6 s (go-live-test LATENCY=1 measures it: the broadcaster's camera is a clock in black and white blocks, read off the viewer's frame). Recordings, and streams where hls.js can't run (iOS), stay on the browser's player.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_013ZDf1cyCQLkfjftYhymZAg

1 files changed, 5 insertions, 2 deletions

diff --git a/src/hls-player.js b/src/hls-player.js
index d0878e2..18292dd 100644
--- a/src/hls-player.js
+++ b/src/hls-player.js
@@ -2,10 +2,13 @@
 // <video> through Media Source. Chrome and Safari play the playlist as a
 // plain src, so this file is fetched only when needed. The single-file
 // build replaces it with a stub (attachHls → null): no stream there.
-export async function attachHls(video, src) {
+// A stream that's on (`live`) is held near its live edge: started 1.5 s
+// back, played up to 1.1× when it drifts past 5 s.
+export async function attachHls(video, src, { live = false } = {}) {
   const { default: Hls } = await import('hls.js');
   if (!Hls.isSupported()) return null;
-  const hls = new Hls({ lowLatencyMode: true, backBufferLength: 30 });
+  const hls = new Hls({ lowLatencyMode: true, backBufferLength: 30,
+    ...(live ? { liveSyncDuration: 1.5, liveMaxLatencyDuration: 5, maxLiveSyncPlaybackRate: 1.1 } : {}) });
   hls.loadSource(src);
   hls.attachMedia(video);
   hls.on(Hls.Events.ERROR, (_, d) => {