How to Add Chapters to Your Video

Cincopa allows you to enhance the viewing experience by adding chapters to your videos. By leveraging Cincopa events, you can enable chapters dynamically and customize their behavior before the gallery is loaded or directly modify media assets to include chapter details.

For more information, refer to the Cincopa Events Documentation and the Cincopa Embed Documentation.

Chapter Configuration Options

You can control the chapter behavior using the following argument:

Argument	Type	Description
`chapter`	Boolean	`true` to enable chapters, `false` to disable them.

Relevant Events

runtime.on-args: Used to enable chapters.
runtime.on-media-json: Used to directly modify media assets and add chapters.

Example Usage

Below is an example demonstrating how to enable and configure chapters for your video:

<script type="text/javascript">
var cincopa = cincopa || {};
cincopa.registeredFunctions = cincopa.registeredFunctions || [];
cincopa.registeredFunctions.push(
  {
    func: function (name, data, gallery) {
      // Enable chapters
      gallery.args.chapter = true;
    },
    filter: "runtime.on-args"
  },
  {
    func: function (name, data, gallery_data) {
      // Define chapters with titles and descriptions
      var timelineObj = {
        "chapter": {
          "00:00:11": { // Time when the chapter will appear
            "title": "Introduction",
            "desc": "Welcome to the video. Here, we provide an overview of the content."
          },
          "00:02:30": {
            "title": "Main Topic",
            "desc": "Dive deep into the main topic with detailed explanations and examples."
          },
          "00:05:45": {
            "title": "Key Insights",
            "desc": "Highlight key takeaways and actionable insights from the discussion."
          },
          "00:08:10": {
            "title": "Conclusion",
            "desc": "Summarize the key points and provide closing remarks."
          }
        }
      };

      // Assign the chapter data to the media JSON
      gallery_data.MediaJSON.items[0].timeline = JSON.stringify(timelineObj);
// If there are multiple videos in the gallery, iterate over the array and set chapters for each.
    },
    filter: "runtime.on-media-json"
  }
);
</script>

Key Notes

Flexibility: Chapters can be dynamically added or modified before the gallery is loaded or directly at the media level.
Customization: Define chapter titles and descriptions to guide viewers through your video content.
Scalability: The example provided works for a single video. For galleries with multiple videos, iterate over the MediaJSON.items array to apply chapters to each video.

For further assistance, feel free to check out our Cincopa Help Center.