MP4 Chapters Demo

Demo app for the blog post: How to add chapters to an MP4 video.

Demonstrates manual chapter markers on an IKVideoPlayer — progress-bar markers and a chapter menu from an inline chapters object — with ImageKit and the @imagekit/video-player SDK.

Routes

Route	Description
/	Product-walkthrough lesson with 16 inline chapters

What's on /

1. Chapter markers — timestamps from lib/lesson.ts rendered as markers on the progress bar
2. Chapter menu — jump between sections from the control bar (e.g. "DAM Sharing" at 8:09)
3. Inline chapters shape — chapters: { [seconds]: title } on the player source prop

Setup

1. Clone the repo and navigate to this folder:

   cd chapters-demo

2. Install dependencies:

   npm install

3. Create .env.local with your ImageKit ID (optional — defaults to ikmedia):

   NEXT_PUBLIC_IMAGEKIT_ID=your_imagekit_id
   

   The sample video is hosted on ImageKit's ikmedia endpoint. To use your own video, update LESSON_VIDEO_SRC in lib/lesson.ts.

4. Start the dev server:

   npm run dev

   Open http://localhost:3000.

Environment variables

Variable	Description
NEXT_PUBLIC_IMAGEKIT_ID	Your ImageKit ID (path segment after ik.imagekit.io/), e.g. your_imagekit_id