Chapters & Cue Points

Chapters (also known as cue points) allow viewers to navigate to specific sections of a video. They appear as markers on the timeline and provide easy access to different parts of your content.

Basic Chapters

Add chapters to your video by including them in the source configuration. Chapters help viewers navigate long-form content efficiently.

Setup Code

const mediaSource = {
  id: 'chapters-demo',
  src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
  type: 'application/x-mpegURL',
  title: 'Video with Chapters',
  chapters: [
    {
      src: '/chapters.json',       // URL to JSON chapter file
      label: 'Chapters',            // Display name in TOC menu
      srclang: 'en',                // Language code
      type: 'json',                 // Specify JSON format
      default: true                 // Set as default chapter track
    }
  ]
};

player.setup(mediaSource);

Chapter Features

Timeline Markers

Chapters appear as visual markers on the video timeline, making it easy for viewers to see content structure at a glance.

Table of Contents (TOC)

The TOC menu displays all chapters in a list format. Viewers can click on any chapter title to jump directly to that section.

Hover Preview

When hovering over the timeline, chapter titles appear to show what content is at that position.

Chapter File Format

Chapters use JSON format with time ranges and titles. Each chapter defines a segment of the video.

JSON Format

[
  {
    "id": "chapter-0",
    "from": 0,
    "to": 46,
    "title": "Introduction",
    "text": "Chapter 1: Introduction"
  },
  {
    "id": "chapter-1",
    "from": 46,
    "to": 92,
    "title": "Getting Started",
    "text": "Chapter 2: Getting Started"
  },
  {
    "id": "chapter-2",
    "from": 92,
    "to": 138,
    "title": "Basic Features",
    "text": "Chapter 3: Basic Features"
  }
]

id - Unique identifier for the chapter
from - Start time in seconds
to - End time in seconds
title - Chapter title displayed in TOC and timeline
text - Additional descriptive text (optional)

Additional Chapter Options

The player provides several options to control chapter functionality:

const options = {
  showTOC: true,           // Show table of contents button (default: true)
};

player.setup(mediaSource, options);

showTOC - Show/hide the table of contents button in the player controls

Ravnur Media Platform

Simple. Reliable. Flexible.

Automatically generate cue points for your videos with our AI-powered content analysis. Our web-based cue-point editor allows you to link agenda items to specific timecodes, making it easy to create professional chapter markers.