How do you sync on-screen labels to a video's timestamp without a timeline library?

by

Built a five beat welcome film this week. Each beat swaps an on-screen label at a fixed timestamp, 0s, 2.6s, 6.0s, 9.2s, 12.4s, across a 13.9s clip. No timeline or animation library involved, just an array of at and label pairs, plus the video element's onTimeUpdate event computing progress and a reduce picking the active beat.

It works, but onTimeUpdate fires at whatever cadence the browser feels like, so the swap is never frame accurate. Close enough that nobody notices on a phone screen, but it still feels like the wrong tool for the job.

Curious if anyone has found something lighter than watching onTimeUpdate for this, or if that is genuinely the standard approach and I am just late to it.

4 views

Add a comment

Replies

Be the first to comment