Video Chapters

Split a long video into named sections viewers can jump to.

moderate Media & Video

What it adds

A chapter list beside the video and matching markers on the scrub bar, both seeking on click.

What your agent is told to do

1
Extend the app's Custom Video Player rather than adding a second player to host chapters. Chapters are a layer over the existing transport controls.
2
Show chapters in two places that stay in step: a list of titles with start times next to or under the video, and segment markers on the scrub bar. Clicking either seeks to that chapter's start.
3
Keep the current chapter highlighted in the list and scroll it into view as playback moves, including while the viewer is dragging the scrub bar.
4
Accept chapter data from wherever the app already stores video metadata, and validate it on save so a bad chapter list is rejected at authoring time rather than breaking the player.
5
Do not require chapters. A video without them must render exactly as it does today, with no empty list and no gaps in the scrub bar.

Edge cases it handles

Authored chapter timestamps arrive out of order, overlapping, or past the end of the video. Sort them, drop or clamp the ones that cannot be reconciled, and tell the author which were rejected rather than rendering a broken bar.
On a narrow player the markers crowd into an unreadable stripe. Merge or hide markers below a minimum spacing and keep the list as the reliable way to navigate.
The active chapter must follow the scrub position while the viewer is dragging, not only update when playback resumes. A list that lags behind the cursor makes scrubbing feel disconnected.
Support a link that opens the page at a given chapter, using the app's existing Shareable Deep Links conventions rather than a new URL format, and update the address as chapters change without flooding the history stack.
Some sources cannot be seeked reliably, including certain live and progressive streams. Fall back to a plain, non-clickable list of chapter titles rather than offering jumps that do nothing.
A chapter title long enough to wrap must not push the video off the layout. Truncate in the list with the full title available on hover and focus.
Chapter titles are typed by whoever uploaded the video and then render over the player for every viewer who opens it. Escape them on display, and where videos come from users rather than staff, hold new titles for review before the video is public.
The chapter list must be keyboard navigable and announce the active chapter, not rely on colour alone to show it.

Definition of done

Chapters appear as both a list and scrub bar markers, and either one seeks on activation.
Out-of-order, overlapping, and out-of-range timestamps are rejected or reconciled at save time with feedback to the author.
Markers collapse rather than overlap on narrow players.
The active chapter stays highlighted and in view during playback and during scrubbing.
A chapter deep link opens the video at the right position using the app's existing link format.
Unseekable sources show a plain list rather than dead controls.
A video with no chapters renders unchanged.
The feature matches the existing design system.
No existing functionality is broken.

Related features

Hover Video Preview

Audio Waveform Scrubber

Video Upload and Encoding

How it works

1

Copy the link

Grab the Markdown instruction URL for this feature.
2

Give it to your AI

Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.
3

It inspects, then implements

Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.