Chapter Demo

1. Chapter Demo

2. Sample Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" charset="utf-8" src="https://cdn.zwplayer.com/v3/zwplayer/zwplayer.js"></script>
</head>
<body>
<div id="mse" style="width: 800px; height: 450px;  margin: 0 auto;"></div>
<script type="text/javascript">
    function onLoadChapters() {
        if (player1) {
            var json = [
                {
                    "title": "Zhejiang Team's Advancement and Controversies",
                    "desc": "Discussion on the Zhejiang team's narrow victory in the CBA match and their historical advancement to the finals, as well as the Shenzhen team's controversial loss and the intense reaction from fans.",
                    "time": 0,
                    "duration": 50,
                    "image": null
                },
                {
                    "title": "Referee Issues and the Basketball Association's Response",
                    "desc": "Analysis of the referees' foul-calling standards and controversies during the match, as well as the Chinese Basketball Association and CBA company's reactions and measures regarding referee issues.",
                    "time": "00:00:50",
                    "duration": 91,
                    "style": {"background": "blue"},
                    "image": null
                },
                {
                    "title": "NBA Court Controversies and the Lakers' Challenge",
                    "desc": "Exploring controversies on the NBA court, particularly the Lakers' performance and the challenges they face in the playoffs.",
                    "time": 141,
                    "duration": 81,
                    "style": {"background": "green"},
                    "image": null
                }
            ];
            player1.setChapters(json);
        }
    }

    var info = {
        playerElm: '#mse',
        autoplay: false,
        fluid: true,
        ratio: "16:9",
        chapterButton: true,    //Whether to display the chapter button
        url: 'https://cdn.zwplayer.com/media/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggso3185.mp4'
    };

    var player1 = new ZWPlayer(info);
    //Delayed loading
    setTimeout(onLoadChapters, 200);
</script>

</body>
</html>

3. Description of chapter Object Properties

Property Name	Format	Description
title	string	Chapter title
desc	string	Chapter description
time	string or number	Chapter start time, in `hh:mm:ss` format or as a floating-point number (seconds)
duration	number	Duration, in seconds, representing the length of the color block on the progress bar; if 0, it only places a marker on the progress bar
style	JSON object	Chapter style (optional), e.g., {“background”: “blue”}; defaults to red
image	string	Image at the start of the chapter (URL) or null (not supported in the current version)

4. Chapter File Format

The JSON file exported by the chapter editor follows the ZWMAP protocol, and the file is named {Video Title}_chapter.json. ZWPlayer supports both the ZWMAP format and the legacy bare array format.

Additionally, dragging and dropping a chapter JSON file directly onto the player is supported. The player will automatically match the video and chapter file based on the filename.