Slide sync over HLS with ID3 timed metadata

BhaveshSGupta@disroot.org (Bhavesh S. Gupta) — Tue, 06 Oct 2026 09:02:00 +0530

A webcast with slides has to change the slide at the moment the presenter does, as the viewer sees it. Viewers are 10 to 30 seconds behind live, each by a different amount, so a message sent “now” from the presenter’s page arrives at the wrong time for everyone. The fix is to put the slide change inside the stream itself, at the right timestamp. In HLS that means ID3 timed metadata.

In short: To change slides at the exact moment the presenter did, put the change inside the stream as ID3 timed metadata. Each tag rides in the segment on its own data stream with a presentation timestamp, so the player fires it at the right frame however far behind live the viewer is. Put every tag in every quality, re-send the current slide regularly for late joiners, and read the tags through the video element’s metadata text track, which works in hls.js and Safari.

Timed-Metadata on Everyone Has a Story

Slide sync over HLS with ID3 timed metadata