章节演示

1. 章节演示

2. 示例代码

<!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": "开场",
                    "desc": "影片标题序列",
                    "time": 0,
                    "duration": 15,
                    "image": null
                },
                {
                    "title": "初入奇境",
                    "desc": "Proog 向 Emo 介绍左右环境，首次发出安全警告",
                    "time": 15,
                    "duration": 32,
                    "image": null
                },
                {
                    "title": "跟随前行",
                    "desc": "一次小事故后的安抚，Proog 引领 Emo 深入机器内部",
                    "time": 47,
                    "duration": 121,
                    "style": {"background": "blue"},
                    "image": null
                },
                {
                    "title": "学会聆听",
                    "desc": "Emo 被电话分心，Proog 训诫他要聆听机器的声音与自己的呼吸",
                    "time": "00:02:48",
                    "duration": 99,
                    "image": null
                },
                {
                    "title": "机器如钟表",
                    "desc": "Emo 首次流露厌倦，Proog 激烈训斥：走错一步即被碾作肉泥",
                    "time": 267,
                    "duration": 74,
                    "image": null
                },
                {
                    "title": "闭眼测试",
                    "desc": "Proog 让 Emo 闭眼描述所见，Emo 答左右皆空——什么都没有",
                    "time": 341,
                    "duration": 59,
                    "image": null
                },
                {
                    "title": "好奇与禁令",
                    "desc": "Emo 听见声响想要探索，Proog 强硬拒绝：那里不安全",
                    "time": 400,
                    "duration": 31,
                    "image": null
                },
                {
                    "title": "美在何处",
                    "desc": "核心冲突——Proog 质问为何看不到此地的美，Emo 反驳：什么都没有",
                    "time": 431,
                    "duration": 31,
                    "image": null
                },
                {
                    "title": "决裂",
                    "desc": "Emo 指责 Proog 是个病人，要求他离自己远点",
                    "time": 462,
                    "duration": 10,
                    "image": null
                },
                {
                    "title": "幻觉盛宴",
                    "desc": "Proog 追喊着爆发幻觉：巴比伦空中花园、罗德岛太阳神巨像",
                    "time": 472,
                    "duration": 59,
                    "style": {"background": "green"},
                    "image": null
                },
                {
                    "title": "尾声",
                    "desc": "Proog 倔强独白：它就在那里，我告诉你，Emo，它在",
                    "time": 531,
                    "duration": 122,
                    "image": null
                }
            ];
            player1.setChapters(json);
        }
    }

    var info = {
        playerElm: '#mse',
        autoplay: false,
        fluid: true,
        ratio: "16:9",
        chapterButton: true,    //是否显示章节按钮
        url: 'https://cdn.zwplayer.com/media/ed/ed_hd.mp4'
    };

    var player1 = new ZWPlayer(info);
    //延时加载
    setTimeout(onLoadChapters, 200);
</script>

</body>
</html>

3. chapter 对象属性说明

属性名	格式	说明
title	string	章节标题
desc	string	章节简介
time	string 或 number	章节起始时间，`hh:mm:ss` 格式或浮点数（秒）
duration	number	时长，单位秒，表示色块在进度条的长度，如果为0，只是在进度条上打点
style	JSON 对象	章节样式（可选）如： {“background”: “blue”} 缺省为红色
image	string	章节起点图片（URL）或 null（当前版本不支持）

4. 章节文件格式

章节编辑器导出的 JSON 文件遵循 ZWMAP 协议，文件命名为 {视频标题}_chapter.json。ZWPlayer 同时支持 ZWMAP 格式和旧版裸数组格式。

此外，也支持将章节 JSON 文件直接拖拽到播放器上加载，播放器会自动按文件名匹配视频与章节文件。