Video Chapter & Navigation

ReactVideoChaptersNavigationPlayerUpdated 2026-08-14

When to use: Improving long-video UX: chapters with navigation, seek thumbnails on hover, and transcript-linked jumping.

Install
npx skills add video-chapter-marker
Git Clone
git clone https://github.com/skillhub-community/video-chapter-marker.git

Description

A chapter and navigation layer for video players. ChapterBar: a segmented progress bar where each segment is a chapter with a title tooltip on hover; clicking jumps to the chapter start. Chapters auto-detect from uploaded SRT markers, a JSON timeline, or AI segmentation (via a summarizer adapter that splits the transcript into titled sections). SeekPreview: hover the progress bar to see a thumbnail frame preview of that timestamp (sprite-sheet based, so it's fast and offline).

TranscriptNav: when a transcript is available, scrolling the transcript highlights the current spoken section and clicking any line jumps the video to that moment — a two-way sync. VideoTOC: a collapsible table of contents panel listing chapters with durations and auto-generated summary lines. Includes a 'chapter editor' for renaming/reordering chapters and an export of the chapter map as JSON/SRT. All controls are keyboard accessible and work with any HTML5 video or the bundled player shell.

AI Hub

Need a model endpoint?

AI Hub is an OpenAI-compatible endpoint for Cursor, Claude Code, and Agent workflows.

Open AI Hub

Metadata

Author@video_wang
LicenseMIT
Version1.0.0
Dependencies0