Scroll-Linked Video Chapter Navigation

What this builds

A long-form page where a <video> element (or canvas image sequence) scrubs its playback position in response to scroll, divided into named chapters. Each chapter occupies a measured scroll range, has its own text overlay, and is reflected in a persistent chapter navigation bar. The nav highlights the active chapter and allows click-to-scroll-to-chapter jumps.

• Sticky-pinned video viewport that holds while scroll drives playback forward/backward
• Chapter data model mapping scroll ranges to video time codes
• Persistent vertical or horizontal chapter nav with active-state indicator
• Text overlays that appear/disappear at chapter boundaries
• Buffered seeking with requestAnimationFrame gating to prevent decoder overload
• Canvas image-sequence fallback for frame-perfect scrubbing without seek latency
• prefers-reduced-motion fallback: video plays at 1x with chapter skip buttons instead of scrub

When to use / when not to

• Use when video content has a natural narrative structure (product walkthrough, explainer, case study) and the viewer should control pacing by scrolling.
• Use when chapters need text annotations, stats, or callouts synchronized to specific moments.
• Do NOT use for short ambient loops or background video. A <video autoplay muted loop> is simpler and correct.
• Do NOT use for content the viewer should just press play on (testimonials, interviews). A normal player is better UX.
• For canvas-based image-sequence scrubbing without chapter structure, see primitive image-sequence-scrubbing. For scroll-progress narrative structure without video, see scroll-progress-storytelling. For the pinning mechanics alone, see sticky-pinning-sequences.