Chapters.md

Chapters

The Chapters component provides visual representations of media chapters across different UI locations. It enhances navigation and content awareness by highlighting current chapter positions and offering next/previous controls. The chapter titles are localized and updated dynamically in the tooltip and controller based on playback time.

Configuration

Configuration example with defaults:

const playerConfig = {
    chapters: {
        showInScrubber: true,
        showInTooltip: true,
        showInController: true,
        showControllerButtons: true
    }
};

Setting Name	Type	Description
showInScrubber	Boolean	Shows chapter segments along the scrubber timeline.
showInTooltip	Boolean	Shows chapter titles within the scrubber tooltip.
showInController	Boolean	Displays a controller segment with chapter title and navigation controls.
showControllerButtons	Boolean	Shows previous/next chapter buttons in the controller.

Media Data

This component extends the Media Format:

const mediaData = {
    // ... other data ...
    chapters: [
        {
            title: 'Intro',
            start: 0
        },
        {
            title: {
                en: 'Overview',
                de: 'Übersicht'
            },
            start: 18
        },
        {
            title: 'Demo',
            start: 31
        },
        {
            title: {
                en: 'More Features',
                de: 'Weitere Funktionen'
            },
            start: 58
        }
    ]
}

Data Property	Type	Description
title	String / Object	Chapter title, can be string or locale object with the language code as the respective key
start	Number	Start time of this chapter (in seconds)