Chapter annotation settings

1. Feature Overview

ZWPlayer supports adding chapter markers to video files, particularly suitable for scenarios such as educational videos where navigation by knowledge points is needed. Through preset chapter markers, users can quickly jump to specific knowledge points for learning.

The interface is shown in the figure below:

After successfully setting chapter information:

1. Progress Bar Markers: Chapter marker indicators will be displayed on the player progress bar

2. Chapter Menu: If chapterButton: true is set during initialization, a chapter menu button will appear near the time display area of the control bar. Clicking the Chapters button pops up the Chapter List; clicking a specific chapter jumps to that position to start playback.

2. Setting Chapter Information

Use the setChapters method to load chapter marker information. It is recommended to call this method after the video file has loaded.

2.1 Method Signature

player.setChapters(chapters);

2.2 Parameter Types

The chapters parameter supports the following three formats:

1. Large string containing chapter content (JSON or VTT format)

2. Parsed js array

3. HTTP address of the chapter file

The chapters parameter can be a string or an already parsed js array. zwplayer will automatically recognize and load chapter information based on the parameter content.

3. Chapter Data Format

3.1 JSON Format (ZWPlayer Private Format)

The JSON format of chapter files is a private format defined by zwplayer. The content of a JSON format chapter file is as follows:

[
  {
    "title": "Triangle Knowledge Points",
    "desc": "Introduces properties of triangles, congruence, and additional knowledge",
    "time": "01:04",
    "duration": 60,
    "style": {
      "background": "blue"
    },
    "image": null
  },
  {
    "title": "Quadrilateral Knowledge",
    "desc": "Introduces properties of quadrilaterals, congruence, and additional knowledge",
    "time": "02:04",
    "duration": 50,
    "style": {
      "background": "green"
    },
    "image": null
  }
]

As shown in the above chapter list JSON, each chapter point is a js object. The object property descriptions are as follows:

3.2 VTT Format (WEBVTT)

If chapter data starts with WEBVTT, zwplayer will automatically parse it as VTT format. See VTT format specification for details.

4. Auto-recognition Rules

zwplayer automatically recognizes chapter formats based on parameter content:

• Starts with HTTP/HTTPS: Treated as remote chapter file URL for automatic download

• Starts with "[": Parsed as JSON array

• Starts with "WEBVTT": Processed as WEBVTT file

5. Usage Examples

Example 1: Loading Chapters via URL

// Initialize player
window.mainplayer = new ZWPlayer({
    url: 'http://example.com/vod/movie.mp4',
    playerElm: '#mse',
    chapterButton: true, // Enable chapter button
});

// Delay loading chapter information
setTimeout(function () {
    if (window.mainplayer) {
        window.mainplayer.setChapters('http://example.com/chapters.json?v=236');
    }
}, 200);

Example 2: Loading via Ajax and Passing Array

// Initialize player
window.mainplayer = new ZWPlayer({
    url: 'http://example.com/vod/movie.mp4',
    playerElm: '#mse',
    chapterButton: true,
});

// Use jQuery Ajax to load chapter information
$.get('http://example.com/chapters.json?v=236', {}, function (data) {
    if (window.mainplayer) {
        // If chapter information is loaded correctly, data should already be a js array
        window.mainplayer.setChapters(data);
    }
}, 'json');

Example 3: Directly Passing Chapter Array

const chapters = [
    {
        title: "Chapter 1",
        desc: "Introduction to knowledge points",
        time: "00:00:10"
    },
    {
        title: "Chapter 2",
        desc: "Advanced content",
        time: "00:05:30"
    }
];

player.setChapters(chapters);

6. Notes

1. Timing Selection: It is recommended to set chapter information after the video has loaded

2. Format Validation: Ensure chapter data format is correct, especially the time format

3. Image Support: Current version does not support chapter start point image functionality

4. Compatibility: Supports both hh:mm:ss format and floating-point time notation

By properly utilizing the chapter markers feature, user learning experience can be significantly enhanced, especially for tutorial videos with clear content structure.