来自 技术 2019-01-28 的文章

阿里云 Aliplayer高级功能介绍(六):进度条标记

开发十年,只剩下这套Java开发体系了>>>

基本介绍

Aliplayer在进度条上提示时间和缩略图功能外,还可以进行视频内容的提示打点,当然不止是进度条上显示打点的内容,还提供一组接口,方便用户进行打点时间和内容的获取, 基本UI如下图所示:

接口和属性介绍

播放器提供了progressMakers属性,是一个数组类型,每一条记录包含offset时间和text打点的内容,还可以包含其他属性,此属性用于告诉播放器进度条打点记录,记录内容属性说明:

名称 类型 说明 offset Number 打点的视频偏移时间,单位:秒 text String 打点的文本信息,默认UI会使用 isCustomized Boolean 是否使用默认UI,不使用设置为true 事件

Aliplayer提供两个事件:鼠标进入进度条上的打点和鼠标离开进度条上的打点。

//鼠标进入进度条上的打点player.on('markerDotOver', function(data) { let params = data.paramData, progressMarker = params.progressMarker, //打点记录信息 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, progressMakers:[ {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}], progressMakers:[ {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播放器方式时, 自动从云端获取打点的内容显示在进度条上, 播放时用户无需关心此视频是否有打点,用户使用此功能时更简单和方便。

原文链接

标签:   高防域名      removeAttr()   
上一篇:day29:关闭服务|
下一篇:没有了