基本介绍
Aliplayer 在进度条上提示时间和缩略图功能外, 还可以进行视频内容的提示打点, 当然不止是进度条上显示打点的内容, 还提供一组接口, 方便用户进行打点时间和内容的获取, 基本 UI 如下图所示:
https://www.atatech.org/articles/129111#1 接口和属性介绍
播放器提供了 progressMakers 属性, 是一个数组类型, 每一条记录包含 offset 时间和 text 打点的内容, 还可以包含其他属性, 此属性用于告诉播放器进度条打点记录, 记录内容属性说明:
名称 | 类型 | 说明 |
---|---|---|
offset | Number | 打点的视频偏移时间,单位:秒 |
text | String | 打点的文本信息, 默认 UI 会使用 |
isCustomized | Boolean | 是否使用默认 UI,不使用设置为 true |
https://www.atatech.org/articles/129111#2 事件
Aliplayer 提供两个事件: 鼠标进入进度条上的打点和鼠标离开进度条上的打点.
- // 鼠标进入进度条上的打点
- player.on('markerDotOver', function(data) {
- let params = data.paramData,
- progressMarker = params.progressMarker, // 打点记录信息
- left = params.left; // 打点的离播放器左边的距离
- });
- // 鼠标离开进度条上的打点
- player.on('markerDotOut', function() {
- });
https://www.atatech.org/articles/129111#3 相关接口
为了方便打点内容的编辑提供了下面的接口:
接口名称 | 参数 | 说明 |
---|---|---|
enterProgressMarker | 无 | 播放器进入打点编辑状态,在 seek 操作完成时,不会播放视频 |
exitProgressMarker | 无 | 播放器退出打编辑状态,在 seek 操作完成时,会继续播放视频 |
isInProgressMarker | 无 | 是否是打点编辑状态 |
getProgressMarkers | 无 | 获取打点数组 |
https://www.atatech.org/articles/129111#4 功能使用
下面会介绍播放器如何辅助用户进行打点信息的生成和维护.
https://www.atatech.org/articles/129111#5 打点 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();
- }
- }
https://www.atatech.org/articles/129111#6 播放显示打点
打点信息通过在创建播放器的时候传给播放器, 代码如下:
- 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("播放器创建成功");
- });
这样进度条上就会有打点的标记, 鼠标放上去就会显示打点的内容:
https://www.atatech.org/articles/129111#7 自定义打点内容
Aliplayer 默认打点的 UI 只显示文本, 如果需要显示其他的内容比如图片, 并且 UI 需要自定义时, 可以通过 Aliplayer 提供的自定义组件实现不同的打点 UI, 比如我要实现下面的自定义 UI:
https://www.atatech.org/articles/129111#8 自定义 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;
- }
https://www.atatech.org/articles/129111#9 应用自定义打点组件
可以通过 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("播放器创建成功");
- });
https://www.atatech.org/articles/129111#10 使用点播服务
后续点播服务会提供 API, 方便用户保存打点的内容到点播服务, Aliplayer 会在用户使用 videoId 播放器方式时, 自动从云端获取打点的内容显示在进度条上, 播放时用户无需关心此视频是否有打点, 用户使用此功能时更简单和方便.
来源: https://yq.aliyun.com/articles/686043