章节标注设置

1. 章节标注演示

2. 示例代码

<!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": "浙江队晋级与争议",
                    "desc": "讨论浙江队在CBA比赛中的惊险胜利和历史晋级总决赛，以及深圳队的争议性失利和球迷的激烈反应。",
                    "time": 0,
                    "duration": 50,
                    "image": null
                },
                {
                    "title": "裁判问题与篮协应对",
                    "desc": "分析比赛中裁判的吹罚尺度和争议，以及中国篮协和CBA公司对裁判问题的反应和处理措施。",
                    "time": "00:00:50",
                    "duration": 91,
                    "style": {"background": "blue"},
                    "image": null
                },
                {
                    "title": "NBA赛场争议与湖人挑战",
                    "desc": "探讨NBA赛场上的争议，特别是湖人队在季后赛中的表现和面临的挑战。",
                    "time": 141,
                    "duration": 81,
                    "style": {"background": "green"},
                    "image": null
                }
            ];
            player1.setChapters(json);
        }
    }

    var info = {
        playerElm: '#mse',
        autoplay: false,
        chapterButton: true,    //是否显示章节按钮
        url: 'https://cdn.zwplayer.cn/media/VMAP9lxJvRpgn5sP3lV6rQ9qkzQmh5psggso3185.mp4'
    };

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

</body>
</html>

3. chapter 对象属性说明

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

目录导航