subtitles-demo

How to add AI subtitles and chapters to videos on your Next.js site using ImageKit. One Next.js page, one IKVideoPlayer: a course lesson with AI-generated English subtitles, karaoke-style word highlighting, Spanish/French/German translations, and AI chapter markers — wired entirely through the player's source prop. The full step-by-step walkthrough lives in BLOG.md.

Live demo at a glance. Open /, press play, and toggle the captions button for auto-generated subtitles with word highlighting. Switch languages in the captions menu, and use the chapter markers on the progress bar to jump between sections.

Stack

• Next.js 16 (App Router) + React 19 + TypeScript
• Tailwind CSS v4
• @imagekit/video-player (latest)

Run it

cp .env.local.example .env.local   # optional — defaults to ikmedia
npm install
npm run dev

Open http://localhost:3000.

@imagekit/video-player still lists React 17/18 in its peer deps, so the bundled .npmrc sets legacy-peer-deps=true to let npm install run clean on React 19. Delete it once a release adds React 19 to its peer range.

How it works

Subtitles and chapters are configuration on the player's source object — no VTT files, no transcription queue. The wiring lives in components/LessonPlayer.tsx and lib/lesson.ts:

const source = {
  src: LESSON_VIDEO_SRC,
  chapters: true, // AI-detected chapter markers
  textTracks: [
    { autoGenerate: true, default: true, maxChars: 60, highlightWords: true },
    { autoGenerate: true, translations: TRANSLATIONS }, // es, fr, de
  ],
};

• autoGenerate runs speech-to-text on the source audio.
• highlightWords adds karaoke-style word highlighting on the primary track.
• translations derives extra caption languages from the same transcription.
• chapters: true auto-detects sections; pass a { [seconds]: title } object for manual chapters (see MANUAL_CHAPTERS in lib/lesson.ts).

AI subtitles and chapters require the video to live in an ImageKit account with the Video API enabled. The demo defaults to the public ikmedia account so it runs with no upload.

Customizing

• Swap LESSON_VIDEO_SRC in lib/lesson.ts for your own ImageKit-hosted video (it needs audio for transcription).
• Add or remove entries in TRANSLATIONS to change the caption languages.
• Toggle highlightWords, adjust maxChars, or switch chapters: true for MANUAL_CHAPTERS in LessonPlayer.tsx.

Learn more

• Auto subtitles guide
• Video Player overview
• Create a free ImageKit account