Contact Support | System Status
Page Contents

    Adding Chapters to a Video

    This topic explains how to create chaptered video for the Brightcove Player.

    Working sample

    Let's start by looking at a working sample of chaptered video - start the video below and mouse over the chapter menu icon to display the chapter menu:

    How it works

    Chaptered video requires:

    • A Brightcove player - no special properties, styling, or plugins required
    • A WebVTT file describing the chapters of the video - for example:
                  00:00:00.000 --> 00:00:30.000
                  00:00:30.000 --> 00:00:54.000
                  00:00:54.000 --> 00:01:25.000
                  00:01:25.000 --> 00:01:54.000
                  Sea Horse
                  00:01:54.000 --> 00:02:23.000
                  00:02:23.000 --> 00:02:35.000

    In the sample above, note that each chapter entry consists of two lines:

    1. The start and end time for the chapter, in the format: hours:minutes:seconds.milliseconds (for example: 00:02:23.000) and is strictly parsed; numbers must be zero padded if necessary
    2. The chapter title that will appear in the player chapter menu - note that only plain text is supported, and the title must not contain the substring -->

    The WebVTT file can be associated with a video in any of three ways:

    1. Upload the WebVTT file using the Ingesting WebVTT Files document in the Dynamic Ingest API information.
    2. Add the URL for the WebVTT file in the Text Track properties for the video in Studio - be sure the access the Advanced Settings and set the Kind to Chapters:
      studio text track settings
    3. Reference the WebVTT file URL in a <track> tag to the in-page embed code:
                    class="video-js" controls>
                        <track src="" kind="chapters" label="Chapters" srclang="en">
                  <script src=""></script>

    Add the WebVTT file for the chapters using the <track> tag to the in-page embed code:

                  class="video-js" controls>
                      <track src="" kind="chapters" label="Chapters" srclang="en">
                <script src=""></script>

    The following graphic shows how the chapters menu in the player is generated from the webVTT file:


    Publishing the player

    You can use either the iframe or in-page embed - chapters will work the same in both.

    Since you will need to add a track tag to the video for the .vtt file, you will need to use the in-page embed for chaptered video.

    No additional plugins, CSS, or JavaScript code is required.

    Page last updated on 19 Jun 2021