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

基本介绍
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播放器方式时， 自动从云端获取打点的内容显示在进度条上， 播放时用户无需关心此视频是否有打点，用户使用此功能时更简单和方便。

原文地址：http://blog.51cto.com/14031893/2346726

时间： 2024-10-29 13:21:03

阿里云 Aliplayer高级功能介绍(六)：进度条标记的相关文章

阿里云 Aliplayer高级功能介绍(三)：多字幕

基本介绍 国际化场景下面,播放器支持多字幕,可以有效解决视频的传播障碍难题,该功能适用于视频内容在全球范围内推广,阿里云的媒体处理服务提供接口可以生成多字幕,现在先看一下具体的效果: WebVTT格式介绍 多字幕现在支持HLS的格式,后期会去实现Dash格式的支持. 字幕文件 字幕的内容使用WebVTT的格式,更多的关于WebVTT可以参考WebVTT 格式如下: WEBVTT 00:00:09.960 --> 00:00:12.600 Argentina was among the found

阿里云 Aliplayer高级功能介绍(八)：安全播放

基本介绍如何保障视频内容的安全,不被盗链.非法下载和传播,阿里云视频点播已经有一套完善的机制保障视频的安全播放: 更多详细内容查看点播内容安全播放,H5的Aliplayer对于上面的安全机制都是支持的,但是也有一些限制. 访问限制访问限制主要是阿里云视频云提供的安全访问能力, 只需要云端配置, 播放器无需做额外的事情,并且拒绝访问的原因会通过"X-Tengine-Error"Response Header返回,Http请求的错误的Code为403. 开启Referer防盗链后,如果Re

阿里云 Aliplayer高级功能介绍(七)：多分辨率

基本介绍网络环境比较复杂.网速不稳定,Aliplayer提供了多分辨率播放的模式,用户可以手工切换分辨率和播放器选择最优分辨率,基本UI如下: 66ccc596257a5db1d0f106b57454e14da6a8f61e Source模式source的方式指定多个清晰度的地址,这个模式在直播场景下使用的比较多,阿里云直播服务可以提供多码率的播放流地址,详细请参考:视频直播转码.Aliplayer提供了下面清晰度的对应关系: Code TextOD 原画FD 流畅LD 标清SD 高清HD 超清

阿里云 Aliplayer高级功能介绍(九)：自动播放体验

基本介绍 经常会碰到客户询问,为什么我设置了autoplay为true,但是没有自动播放,每次都要向客户解释这个是浏览器从用户体验角度考虑做的限制,客户会继续询问那我要怎么做? 针对这个问题Aliplayer也专们做过优化,提供一些方式让客户能更好的处理这种情况. 现象描述 有声音视频无法自动播放这个在移动端上一直都是这个限制,桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能,Chrome也在2018年4月份发布的66版本也正式关掉了声音自动播放,也就是说通过H5

阿里云 Aliplayer高级功能介绍(五)：多语言

基本介绍Aliplayer默认支持中文和英文,并且依赖于浏览器的语言设置自动启用中文或英文资源, 除了支持这两种资源外,还提供自定义语言的形式,支持其他国际语言,另外Aliplayer还支持点播服务的多地域,可以支持VideoId的方式播放东南亚和欧洲的视频资源,英文版本播放器: 语言设置属性Aliplayer提供language属性用于指定语言,此属性的优先级高于浏览器的语言设置,默认值为空,代码: var player = new Aliplayer({id: "player-con&quo

Bootstrap &lt;基础二十六&gt;进度条

Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性,Opera 12 不支持动画. 默认的进度条 创建一个基本的进度条的步骤如下: 添加一个带有 class .progress 的 <div>. 接着,在上面的 <div> 内,添加一个带有 class .prog

Virtualbox 多重加载 高级功能介绍

1. 简介 对于虚拟机,相信对大家来说都不陌生,尤其对一个IT行业的人来讲.让你在现有的操作系统上不需要从新装系统和购买新机器就可以使用其他类型的操作系统.现在主流的虚拟就有VMWare和Virtualbox,virtualbox体系小,也比较稳定,还有一些独到的高级功能比较受用户的青睐. 对于虚拟机中的操作系统,我们大多时候都是用来做实验或者其他用途,但总结起来一句通俗的话,那就是用来折腾的.对于经常使用虚拟机的人来说,可能经常需要将虚拟机中的系统还原到之前的状态,搞不好还需要重新安装.有人会

阿里云 oss 小文件上传进度显示

对阿里云OSS上传小文件时的进度,想过两个方法:一是.通过多线程监測Inputstream剩余的字节数来计算,可是由于Inputstream在两个线程中共用,假设上传线程将Inputstream关闭,在监測线程就会报"句柄无效"的错误,甚至会导致上传失败:第二个方法是通过线程不断监測OSS上已经上传文件的大小,可是在文件全然上传前是不能获得文件大小的. 最后突然灵感来了,把两个方法同一时候使用就行监測文件上传的进度. 看代码: // 上传小文件 private static void

Android UI（四）云通讯录项目之云端更新进度条实现

作者:泥沙砖瓦浆木匠 网站:http://blog.csdn.net/jeffli1993 个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节. 交流QQ群:[编程之美 365234583]http://jq.qq.com/?_wv=1027&k=XVfBTo 一.前言 继续AndroidUI系列,UI其实是个前端活,美感是最终的boss阶段.泥瓦匠的美感也就给你们评论评论哈哈,我等UI写到一定地步.我想写下Android的一系列简单入门.为了巩固提升呗.哈哈.下面介入正题.