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": "Opening",
                    "desc": "Title sequence",
                    "time": 0,
                    "duration": 15,
                    "image": null
                },
                {
                    "title": "First Sights",
                    "desc": "Proog introduces the surroundings to Emo; first safety warning",
                    "time": 15,
                    "duration": 32,
                    "image": null
                },
                {
                    "title": "Moving On",
                    "desc": "After a minor mishap, Proog leads Emo deeper into the machine",
                    "time": 47,
                    "duration": 121,
                    "style": {"background": "blue"},
                    "image": null
                },
                {
                    "title": "Learn to Listen",
                    "desc": "Distracted by a phone, Emo is lectured to listen to the machine and his own breathing",
                    "time": "00:02:48",
                    "duration": 99,
                    "image": null
                },
                {
                    "title": "Like Clockwork",
                    "desc": "Emo first shows weariness; Proog snaps that one wrong step means being ground to a pulp",
                    "time": 267,
                    "duration": 74,
                    "image": null
                },
                {
                    "title": "Eyes Closed",
                    "desc": "Proog has Emo close his eyes and describe what he sees; Emo answers: nothing, on both sides",
                    "time": 341,
                    "duration": 59,
                    "image": null
                },
                {
                    "title": "Forbidden Path",
                    "desc": "Emo hears a sound and wants to explore; Proog refuses: it isn't safe",
                    "time": 400,
                    "duration": 31,
                    "image": null
                },
                {
                    "title": "The Beauty of This Place",
                    "desc": "Core conflict — Proog demands to know why Emo can't see the beauty; Emo retorts there's nothing there",
                    "time": 431,
                    "duration": 31,
                    "image": null
                },
                {
                    "title": "Falling Out",
                    "desc": "Emo calls Proog a sick man and tells him to stay away",
                    "time": 462,
                    "duration": 10,
                    "image": null
                },
                {
                    "title": "Hallucination",
                    "desc": "Proog breaks into a vision: the Hanging Gardens of Babylon, the Colossus of Rhodes",
                    "time": 472,
                    "duration": 59,
                    "style": {"background": "green"},
                    "image": null
                },
                {
                    "title": "Epilogue",
                    "desc": "Proog insists, alone: it is there, I'm telling you, Emo, it is",
                    "time": 531,
                    "duration": 122,
                    "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/ed/ed_hd.mp4'
    };

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

</body>
</html>

3. Description of chapter Object Properties

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.