Adding Chapters in video timeline

You can add chapters to your video timeline to improve user navigation and enhance the viewing experience. By segmenting your video into chapters, viewers can easily jump to specific sections without needing to scrub through the entire video. This guide will show you how to add chapters to the fp-player video element using the addChapters method.

How to add video chapters

Step 1: Set up the fp-player element

Ensure your fp-player element is embedded properly in your HTML. The example below assumes that the player is already embedded in your page with a playback ID.

Step 2: Wait for the FastPix player to load

To add chapters, the player must be fully loaded. Use the DOMContentLoaded event to run your script when the DOM is fully loaded. Check the readyState of the player to confirm it is prepared to accept chapters. If it is not ready, listen for the loadedmetadata event, which triggers when metadata like the video duration is available.

Step 3: Add chapters dynamically

Define your chapters as an array of objects, each containing a startTime and a value (the chapter title). The addChapters method will handle the endTime automatically for each chapter, if it's not specified – using the startTime of the next chapter. If you do provide an endTime, the player will use that instead.

Monitor chapter changes

Use the chapterchange event to monitor when chapters are updated or modified in the player. This is helpful for confirming changes or making further customizations.

Code example

document.addEventListener('DOMContentLoaded', () => {
    const fpPlayerEl = document.querySelector('fp-player');

    const chapters = [
        { startTime: 0, endTime: 2, value: 'Introduction' },
        { startTime: 4, value: 'Chapter 2: Key Concepts' },
        { startTime: 5, endTime: 6, value: 'Chapter 3: Advanced Topics' },
    ];

    function addChaptersToPlayer() {
        if (fpPlayerEl && typeof fpPlayerEl.addChapters === 'function') {
            fpPlayerEl.addChapters(chapters);
        } else {
            console.error('addChapters method not found on fpPlayerEl');
        }
    }

    if (fpPlayerEl && fpPlayerEl.readyState >= 1) {
        addChaptersToPlayer();
    } else if (fpPlayerEl) {
        fpPlayerEl.addEventListener('loadedmetadata', addChaptersToPlayer, { once: true });
    } else {
        console.error('fpPlayerEl not found');
    }

    fpPlayerEl?.addEventListener('chapterchange', () => {
        console.log('Chapter change event detected');
        console.log('Active Chapter:', fpPlayerEl.activeChapter());
    });
}); 

Explanation

fpPlayerEl.readyState: Checks if the player is ready. A readyState of 1 or higher means the player can accept metadata or chapters.

loadedmetadata event: Ensures that key metadata like video duration is loaded before adding chapters.

addChapters method: Adds chapters to the player. If endTime is omitted, it defaults to the startTime of the next chapter.

Chapter structure:

• startTime: The timestamp (in seconds) where the chapter begins.
• value: The chapter's title or label.

chapterchange event: Logs updates to chapters, useful for tracking changes or additional custom functionality.

Convert OpenAI Chapters (Optional)

If you are using OpenAI to generate chapters for your videos, we also provide an option to directly integrate those chapters to FastPix.

For instance, if you have a JSON response with chapters generated by OpenAI, you can convert it to the required format with FastPix using the convertOpenAIChapters function.

Example function:

const openAIChapters = [ 
  { startTime: 0, text: 'Introduction' }, 
  { startTime: 4, text: 'Chapter 2: Key Concepts' }, 
  { startTime: 5, text: 'Chapter 3: Advanced Topics' }, 
]; 
  
const convertedChapters = convertOpenAIChapters(openAIChapters); 
fpPlayerEl?.addChapters(convertedChapters); 

Additional Resources

For more information on adding AI-generated chapters for your videos refer to the blog post.