The original title is: "Build a video watch-time heatmap: interval tracker, beacon endpoint, canvas render"

Short summary

A from-scratch guide to building a video watch-time heatmap with zero dependencies: a client-side interval tracker (~80 lines), a beacon endpoint with SQLite per-second counters, and a canvas renderer. The key insight is tracking segments of media time (spans) rather than discrete events, since events break on seeks and rewatches. The tracker opens spans on playback advance and closes them on any continuity break, using sendBeacon for reliable data delivery even during page unload.

• •Track watched intervals (spans) not events — intervals survive seeks and rewatches correctly
• •Client-side tracker is ~80 lines with zero dependencies, using sendBeacon for reliable delivery
• •Server stores per-second bins in SQLite; canvas renderer visualizes where viewers watch, skip, and rewatch

Generated with AI, which can make mistakes.