关键词：
基本介绍
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()
);
相关接口
为了方便打点内容的编辑提供了下面的接口：
功能使用
下面会介绍播放器如何辅助用户进行打点信息的生成和维护。
打点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播放器方式时， 自动从云端获取打点的内容显示在进度条上， 播放时用户无需关心此视频是否有打点，用户使用此功能时更简单和方便。
阿里云aliplayer高级功能介绍：多语言
基本介绍Aliplayer默认支持中文和英文，并且依赖于浏览器的语言设置自动启用中文或英文资源，除了支持这两种资源外，还提供自定义语言的形式，支持其他国际语言，另外Aliplayer还支持点播服务的多地域，可以支持VideoId的方... 查看详情
阿里云aliplayer高级功能介绍：多语言
基本介绍Aliplayer默认支持中文和英文，并且依赖于浏览器的语言设置自动启用中文或英文资源，除了支持这两种资源外，还提供自定义语言的形式，支持其他国际语言，另外Aliplayer还支持点播服务的多地域，可以支持VideoId的方... 查看详情
阿里云aliplayer高级功能介绍：多分辨率
基本介绍网络环境比较复杂、网速不稳定，Aliplayer提供了多分辨率播放的模式，用户可以手工切换分辨率和播放器选择最优分辨率，基本UI如下：66ccc596257a5db1d0f106b57454e14da6a8f61eSource模式source的方式指定多个清晰度的地址，这个模... 查看详情
阿里云aliplayer高级功能介绍：安全播放
...频的安全播放:更多详细内容查看点播内容安全播放，H5的Aliplayer对于上面的安全机制都是支持的，但是也有一些限制。访问限制访问限制主要是阿里云视频云提供的安全访问能力，只需要云端配置，播放器无需做额外的事情，并... 查看详情
阿里云aliplayer高级功能介绍：多字幕
基本介绍国际化场景下面，播放器支持多字幕，可以有效解决视频的传播障碍难题，该功能适用于视频内容在全球范围内推广，阿里云的媒体处理服务提供接口可以生成多字幕，现在先看一下具体的效果：WebVTT格式介绍多字幕现... 查看详情
阿里云aliplayer高级功能介绍：多字幕
基本介绍国际化场景下面，播放器支持多字幕，可以有效解决视频的传播障碍难题，该功能适用于视频内容在全球范围内推广，阿里云的媒体处理服务提供接口可以生成多字幕，现在先看一下具体的效果：WebVTT格式介绍多字幕现... 查看详情
阿里云aliplayer高级功能介绍：自动播放体验
...做的限制，客户会继续询问那我要怎么做？针对这个问题Aliplayer也专们做过优化，提供一些方式让客户能更好的处理这种情况。现象描述有声音视频无法自动播放这个在移动端上一直都是这个限制，桌面版的Safari在2017年的11版本... 查看详情
阿里云aliplayer高级功能介绍：自动播放体验
...做的限制，客户会继续询问那我要怎么做？针对这个问题Aliplayer也专们做过优化，提供一些方式让客户能更好的处理这种情况。现象描述有声音视频无法自动播放这个在移动端上一直都是这个限制，桌面版的Safari在2017年的11版本... 查看详情
vue如何集成阿里云视频服务组件（aliplayer）视频功能是使用el-dialog弹出aliplayer播放(代码片段)
...#34;href="https://g.alicdn.com/de/prismplayer/2.9.21/skins/default/aliplayer-min.css"/><scriptcharset="utf-8"type="text/javascript"src="https://g.alicdn.com/de/prismplayer/2.9.21/aliplayer-min.js"></script>2.在vue中使用aliplayer<r... 查看详情
js实现进度条功能。
/***纯js进度条*Createdbykineron15/3/22.*/functionprogress(options){this.w=(options&&options.width)?parseFloat(options.width):parseFloat(this.options.width);this.h=(options&&options.height) 查看详情
五班二组高级软件测试进度报告
...天就来说一下小组成员总结的安装过程。1.平台：平台：阿里云操作系统：centos7.02.安装过程2.1docker安装1.设置yum镜像国外的镜像安装速度很慢，采用清华大学TUNA镜像源。用root用户新建/etc/yum.repos.d/docker.repo文件，内容如下：[docke... 查看详情
在powershell中显示高级进度条
如果你需要编写一些PowerShell脚本，尤其在处理一些相对复杂的任务时，你可能希望添加进度条的功能，以便随时可以了解进展情况。Write-Progress这个命令可以帮助你完成简单的需求，请参考官方文档即可，但... 查看详情
进度条实时显示request下载文件的解决方案
...法研究员一职，热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名，科大讯飞比赛第三名，CCF比赛第四名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进... 查看详情
学习extjs6基本功能-进度条组件
Ext.ProgressBar有二种模式：手动和自动；手动：自己控制显示、进度、更新、清除。自动只需要调用Wait方法即可。配置项： 配置项类型说明renderToString指定页面上已经存在的元素or元素id，该元素成为新组件的容器heightNumber ... 查看详情
如何使用mindmanager2019标记视图功能
如何使用MindManager2019标记视图功能标记视图功能介绍1、通过标记视图功能，你可以时刻追踪项目进度及完成程度，可以很清楚的了解到项目的完成进度及各个分项目的进度，可以据此及时的调整修改；项目进度2、标记视图的很... 查看详情
高级组件——进度条jprogressbar(代码片段)
JProgressBarpro=newJProgressBar();pro.setIndeterminate(boolean);设置不确定性 false，确定的进度条（显示进度，常用）。 true，不确定的进度条（一般用来提示等待，不常用）。两种信息类型： &n... 查看详情
android开发---mediaplayer简单音乐播放器
Android开发—MediaPlayer简单音乐播放器功能介绍实现一个简单的播放器，类似网易云音乐形式，功能包括：播放、暂停，停止，退出功能；后台播放功能；进度条显示播放进度、拖动进度条改变进度功能&... 查看详情
基于libmpv内核设计开发的视频播放器-高级版(代码片段)
环境介绍：操作系统:win1064位Qt版本:Qt5.12.6libmpv:采用最新版--截止文章编写。mpv-dev-x86_64-v3-20220918-git一、前言在第一篇文章里已经对libmpv做了详细的介绍，第二篇文章里完成了完整的播放器开发，设计了UI，实现了播放器的基本功... 查看详情