基本介绍
Aliplayer在进度条上提示时间和缩略图功能外，还可以进行视频内容的提示打点，当然不止是进度条上显示打点的内容，还提供一组接口，方便用户进行打点时间和内容的获取， 基本UI如下图所示：
接口和属性介绍
播放器提供了progressMarkers属性，是一个数组类型，每一条记录包含offset时间和text打点的内容，还可以包含其他属性，此属性用于告诉播放器进度条打点记录，记录内容属性说明：
| 名称 | 类型 | 说明 |
|---|---|---|
| offset | Number | 打点的视频偏移时间，单位：秒 |
| text | String | 打点的文本信息,默认UI会使用 |
| isCustomized | Boolean | 是否使用默认UI，不使用设置为true |
事件
Aliplayer提供两个事件：鼠标进入进度条上的打点和鼠标离开进度条上的打点。
//鼠标进入进度条上的打点
player.on('markerDotOver', function(data) {
let params = data.paramData，
progressMarkers = params. progressMarkers, //打点记录信息
left = params.left; //打点的离播放器左边的距离
});
//鼠标离开进度条上的打点
player.on('markerDotOut', function() {
});
相关接口
为了方便打点内容的编辑提供了下面的接口：
| 接口名称 | 参数 | 说明 |
|---|---|---|
| enterProgressMarker | 无 | 播放器进入打点编辑状态，在seek操作完成时，不会播放视频 |
| exitProgressMarker | 无 | 播放器退出打编辑状态，在seek操作完成时，会继续播放视频 |
| isInProgressMarker | 无 | 是否是打点编辑状态 |
| getProgressMarkers | 无 | 获取打点数组 |
功能使用
下面会介绍播放器如何辅助用户进行打点信息的生成和维护。
打点Seek操作
用户在生成打点内容的时候，希望在seek操作时，视频不要播放，这时候就需要让播放器进入打点编辑状态，并且在seek完成时，能够得到当前seek到的时间，这样就可以进行时间和内容对应关系的编辑。
创建播放器时，订阅completeSeek事件，代码如下：
player.on('completeSeek',function(e){
console.log('seek完成：'+ e.paramData);
//seek完成：：12.875738146938774 单位为秒
});
如果希望seek结束时画面时静止的，使用的代码如下：
<button click="switchProgressMarker()">开始打点</button>
var switchProgressMarker = ()=>{
if(!player.isInProgressMarker())
{ //如果为进入编辑状态，调用enterProgressMarker
player.enterProgressMarker();
}
else
{
//如果为已经是编辑状态，调用exitProgressMarker退出
player.exitProgressMarker();
}
}
播放显示打点
打点信息通过在创建播放器的时候传给播放器，代码如下：
var player = new Aliplayer({
id: "player-con",
source: "//common.qupai.me/player/qupai.mp4",
width: "100%",
height: "500px",
autoplay: true,
progressMarkers:[
{offset:0,text:'阿里视频云端到云到端服务的重要一环'},
{offset:10,text:'除了支持点播和直播的基础播放功能外'},
{offset:20,text:'深度融合视频云业务'},
{offset:30,text:'为用户提供简单、快速、安全、稳定的视频播放服务'},
{offset:40,text:'安装播放器Demo进行体验'},
{offset:50,text:'开发人员请点击SDK下载'}
],
}, function (player) {
console.log("播放器创建成功");
});
这样进度条上就会有打点的标记， 鼠标放上去就会显示打点的内容：
自定义打点内容
Aliplayer默认打点的UI只显示文本， 如果需要显示其他的内容比如图片，并且UI需要自定义时，可以通过Aliplayer提供的自定义组件实现不同的打点UI，比如我要实现下面的自定义UI：
自定义UI
通过Aliplayer提供的自定义组件的模式实现打点内容的显示UI，自定义组件里新增了markerDotOver、markerDotOut的hooker钩子，打点组件的代码实现如下：
var ProgressMarkerComponent = Aliplayer.Component({
createEl:function(el)
{
let htmlString = "<div class='progress-marker-container'>"+
"<img class='marker-img'></img>"+
"<div class='marker-text'></div>"+
"</div>";
this.container = $(htmlString);
$(el).append(this.container);
},
markerDotOver:function(player,data)
{
let progressMarker = data.progressMarker;
this.container.find('.marker-img').attr('src', progressMarker.imgUrl);
this.container.find('.marker-text').text(progressMarker.text);
this.container.css('left',data.left*100 + "%");
this.container.css('display','flex');
},
markerDotOut:function(player,data)
{
this.container.css('display','none');
}
});
对应的CSS：
.progress-marker-container
{
position: absolute;
width: 210px;
height: 80px;
display: none;
justify-content: flex-start;
align-items: center;
color: #ffffff;
bottom: 55px;
background: rgba(0, 0, 0, 0.8);
}
.progress-marker-container .marker-img
{
width: 80px;
height: 80px;
}
.progress-marker-container .marker-text
{
text-align: center;
word-break: break-all;
}
应用自定义打点组件
可以通过progressMarkers属性可以传除文本外的其他属性，在markDotOver事件发生时，会把对应的记录通过回调参数返回，并且通过components属性应用上面的ProgressMarkerComponent组件，代码如下：
var player = new Aliplayer({
id: "player-con",
source: "//common.qupai.me/player/qupai.mp4",
width: "100%",
height: "500px",
autoplay: true,
components:[{name:'progressMarkerComponent',type:ProgressMarkerComponent}],
progressMarkers:[
{offset:0,isCustomized:true,text:'阿里视频云端到云到端服务的重要一环',imgUrl:'http://player.alicdn.com/demo/h5live/images/avatar.jpg'},
{offset:10,isCustomized:true,text:'除了支持点播和直播的基础播放功能外',imgUrl:'http://player.alicdn.com/demo/h5live/images/avatar.jpg'},
{offset:20,isCustomized:true,text:'深度融合视频云业务',imgUrl:'http://player.alicdn.com/demo/h5live/images/avatar.jpg'},
{offset:30,isCustomized:true,text:'为用户提供简单、快速、安全、稳定的视频播放服务',imgUrl:'http://player.alicdn.com/demo/h5live/images/avatar.jpg'},
{offset:40,isCustomized:true,text:'安装播放器Demo进行体验',imgUrl:'http://player.alicdn.com/demo/h5live/images/avatar.jpg'},
{offset:50,isCustomized:true,text:'开发人员请点击SDK下载',imgUrl:'http://player.alicdn.com/demo/h5live/images/avatar.jpg'}
],
}, function (player) {
console.log("播放器创建成功");
});
使用点播服务
后续点播服务会提供API，方便用户保存打点的内容到点播服务， Aliplayer会在用户使用videoId播放器方式时， 自动从云端获取打点的内容显示在进度条上， 播放时用户无需关心此视频是否有打点，用户使用此功能时更简单和方便。
