3.6.5 zwplayer媒体文件章节打点使用说明

对于网络视频文件，尤其是针对教学用的视频文件，里面的内容可能比较丰富，为了便于用户学习，制作人员可能会为该视频文件设置打点，每一个打点是一个知识点的开始，用户可以根据预设的章节打点随意导航知识点，方便学习。 zwplayer提供setChapters 方法来支持章节打点，建议在视频文件加载以后再调用此方法加载章节打点信息。setChapters支持的参数可以是如下类型：

1. 包含章节内容的大字符串，字符串可以是json或者vtt文件格式

2. 已经分析好的js数组

3. 章节文件的http地址

chapters 参数可以是字符串，也可以是一个已经分析好的js数组。如果chapters是字符串并且是以http或https开头的，则zwplayer会把该参数当作一个章节的url，在加载时自动从远程下载；如果chapters是以字符“[” 开头的，则会被当作一个JSON数组来进行分析；如果chapters是以WEBVTT开头的，则会当作一个WEBVTT文件来处理。

章节文件的json格式是zwplayer定义的私有格式，一个json格式的章节文件内容如下：

[
{
	"title": "三角形知识点",
	"desc": "介绍三角形的性质，全等，与附加知识",
	"time": "01:04",
	"thumb": null
},
{
	"title": "四边形知识",
	"desc": "介绍四边形的性质，全等，与附加知识",
	"time": "02:04",
	"image": null
},
{
	"title": "五边形知识点",
	"desc": "介绍五边形的性质，全等，与附加知识",
	"time": "03:04",
	"image": null
},
{
	"title": "六边形知识点",
	"desc": "介绍六边形的性质，全等，与附加知识",
	"time": "04:04",
	"image": null
},
{
	"title": "七边形知识点",
	"desc": "介绍七边形的性质，全等，与附加知识",
	"time": "05:04",
	"image ": null
}
]

如上章节列表json中每一个章节点都是一个js对象，对象的属性说明如下：

属性名	说明
title	章节标题
desc	章节简介
time	章节的起点时间，给是为hh:mm:ss 或浮点数
image	章节起点图片，zwplayer当前不支持

如下是zwplayer加载章节信息的示例代码：

<script language=”javascript”>
window.mainplayer = new ZWPlayer({ //将对象保存到mainplayer用于追加弹幕
url: 'http://192.168.1.100/vod/movie.mp4',
playerElm:'#player-holder', //player 元素ID ,也可以直接的DOM对象
controlbar: true,
chapterButton: true,
autoplay: true
});

//示例代码在时钟事件里延时加载章节
setTimeout(function() {
if (window.mainplayer) {
    //获取章节url，实际应用中可能是通过ajax获取得到的
    window.mainplayer.setChapters('http://192.168.1.202/chapters.json?v=236');
}
}, 1000)
<script>

提示：章节也可以是一个已经分析好的js数组，示例如下

<script language=”javascript”>
window.mainplayer = new ZWPlayer({ //将对象保存到mainplayer用于追加弹幕
url: 'http://192.168.1.100/vod/movie.mp4',
playerElm:'#player-holder', //player 元素ID ,也可以直接的DOM对象
controlbar: true,
chapterButton: true,
autoplay: true
});

//示例代码通过jQuery的ajax加载章节信息
$.get('http://192.168.1.202/chapters.json?v=236', {}, function(data) {
if (window.mainplayer) {
    // 章节信息如果被正确加载，data应该是一个js数组了
    window.mainplayer.setChapters(data);
}
}, 'json')
<script>

提示：如果成功设置章节信息，播放器进度条上会出现相应的打点标志，同时如果在播放器构造参数里设置了chapterButton 为true，zwplayer也会同时创建一个章节菜单，章节菜单的触发按钮将出现再播放器控制条的时间显示区附近。