Chapter annotation settings

1. Chapter Markers Demo

2. Example Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" charset="utf-8" src="https://cdn.zwplayer.cn/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 Controversy",
                    "desc": "Discussing Zhejiang Team's thrilling victory in the CBA game and historic advancement to the finals, as well as Shenzhen Team's controversial defeat and fans' intense reactions.",
                    "time": 0,
                    "duration": 50,
                    "image": null
                },
                {
                    "title": "Referee Issues and Basketball Association Response",
                    "desc": "Analyzing referee calling standards and controversies during the game, as well as the Chinese Basketball Association and CBA company's response and handling measures to referee issues.",
                    "time": "00:00:50",
                    "duration": 91,
                    "style": {"background": "blue"},
                    "image": null
                },
                {
                    "title": "NBA Court Controversies and Lakers Challenges",
                    "desc": "Exploring controversies on the NBA court, particularly the performance and challenges faced by the Lakers in the playoffs.",
                    "time": 141,
                    "duration": 81,
                    "style": {"background": "green"},
                    "image": null
                }
            ];
            player1.setChapters(json);
        }
    }

    var info = {
        playerElm: '#mse',
        autoplay: false,
        chapterButton: true,    // Whether to display chapter button
        url: 'https://cdn.zwplayer.cn/media/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggso3185.mp4'
    };

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

</body>
</html>

3. Chapter Object Properties

Property Name	Format	Description
title	string	Chapter title
desc	string	Chapter description
time	string or number	Chapter start time, `hh:mm:ss` format or float (seconds)
duration	number	Duration in seconds, indicating the length of the color block on the progress bar. If 0, only a dot is placed on the progress bar
style	JSON object	Chapter style (optional), e.g.: {"background": "blue"}, default is red
image	string	Chapter start point image (URL) or null (not supported in current version)

Catalog Navigation