CQ网站建设,wordpress调文章,制作网站几个步骤,个人简历word免费模板摘要#xff1a; Aliplayer希望提供一种方便、简单、灵活的机制#xff0c;让客户能够扩展播放器的功能#xff0c;并且Aliplayer提供一些组件的基本实现#xff0c;用户可以基于这些开源的组件实现个性化功能#xff0c;比如自定义UI和自己App server的交互等等#xff…摘要 Aliplayer希望提供一种方便、简单、灵活的机制让客户能够扩展播放器的功能并且Aliplayer提供一些组件的基本实现用户可以基于这些开源的组件实现个性化功能比如自定义UI和自己App server的交互等等而不用从头开始开发一些功能节省时间和精力。
阿里云播放器SDKApsaraVideo for Player SDK是阿里视频云端到云到端服务的重要一环除了支持点播和直播的基础播放功能外还深度融合视频云业务支持视频的加密播放、安全下载、首屏秒开、低延时等业务场景为用户提供简单、快速、安全、稳定的视频播放服务。 Aliplayer Web播放器分为H5和Flash两个Flash播放器随着技术的发展会逐渐被边缘化而H5播放器会更加普及。播放器端上已经实现了截图、国际化、变速、UI自定义、微信同层播放、自适应播放、加密播放、H5播放flv、自定义插件等功能。
虽然Aliplayer已经具备相对完善的公共基础能力但是用户会有一些更上层和业务相关的一些需求并且基于用户本身的需求都会存在个性化差异比如弹幕、跑马灯、视频列表等等。
因此Aliplayer希望提供一种方便、简单、灵活的机制让客户能够扩展播放器的功能并且Aliplayer提供一些组件的基本实现用户可以基于这些开源的组件实现个性化功能比如自定义UI和自己App server的交互等等而不用从头开始开发一些功能节省时间和精力。所以支持自定义的新版Aliplayer应运而生。
自定义组件的原理
Aliplayer希望有一种很简单的方式去定义组件让用户的学习成本近乎于零。因此定义出整个播放器的生命周期的重要阶段作为函数钩子用户可以通过函数钩子实现每个阶段的自定义逻辑下面的图列出了主要生命周期标示在函数的周期内会发生的一些阶段 每个阶段的说明
名称说明init new实例的时候调用设置的初始参数在构建对象时会传递给init方法createEl创建组件的UI 参数为播放器容器的divcreated播放器创建完成可以调用播放器的API了ready视频可播放状态play开始播放pause播放暂停playing正在播放waiting等待数据timeupdate播放事件改变通过第二各参数的timestamp属性得到播放时间error播放出错ended播放结束dispose播放器销毁
组件系统特点
1、 实现简单用户只要有前端的基本知识就可以开发一个插件并且支持ES5和ES6的语法只要定义一个Function或者Class根据自己的业务需要实现生命周期函数。
2、 实例的组件注册到播放器在播放创建的过程中也创建组件实例组件是可以保存状态的因此一个组件定义可以注册多个到播放器通过传递不通的参数构建不同的组件具有不同的行为。
3、 开源的每个开源组件都包含了通用的基本功能用户可以在开源的基础上实现自己的个性化需求给用户更大的自主权。
组件的实现方式用户如何快速自定义开发
1. 组件提供了两种方式让用户去开发自己的播放器组件
a. ES6的class类型定义一个组件
当您的项目是使用ES6的语法通过webpack或者babel构建时建议使用这种方式。
/**
* 静态广告组件
*/
export default class StaticADComponent
{/*** 构造函数在new对象时调用** param {string} adAddress - 广告视频地址* param {string} toAddress - 广告链接地址*/constructor(adAddress,toAddress) {this.adAddress adAddress;this.toAddress toAddress;this.$html $(html);}/*** 创建广告Dom元素*/createEl(el){this.$html.find(.ad).attr(src,this.adAddress);this.$html.attr(href,this.toAddress);let $adWrapper this.$html.find(.ad-wrapper);$adWrapper.attr(href,this.toAddress);$adWrapper.click((){Aliplayer.util.stopPropagation();});this.$html.find(.close).click((){this.$html.hide();});$(el).append(this.$html);}/*** 隐藏广告*/play(player,e){this.$html.hide();}/*** 显示广告*/pause(player,e){this.$html.show();}/*** 隐藏广告*/playing(player,e){this.$html.hide();}/*** 显示广告*/ended(player,e){this.$html.show();}
}
b. 使用Aliplayer提供的Component方法
/*** 静态广告组件*/const StaticADComponent Aliplayer.Component({/*** 初始函数在new对象时调用** param {string} adAddress - 广告视频地址* param {string} toAddress - 广告链接地址*/init:function(adAddress,toAddress){this.adAddress adAddress;this.toAddress toAddress;this.$html $(html);},/*** 创建广告Dom元素*/createEl:function(el){this.$html.find(.ad).attr(src,this.adAddress);var $adWrapper this.$html.find(.ad-wrapper);$adWrapper.attr(href,this.toAddress);$adWrapper.click(function(){Aliplayer.util.stopPropagation();});this.$html.find(.close).click(function(){this.$html.hide();});$(el).append(this.$html);},ready:function(player,e){},/*** 隐藏广告*/play:function(player,e){this.$html.hide();},/*** 显示广告*/pause:function(player,e){this.$html.show();},/*** 隐藏广告*/playing:function(player,e){this.$html.hide();},waiting:function(player,e){},timeupdate:function(player,e){},error:function(player,e){},/*** 显示广告*/ended:function(player,e){this.$html.show();}
});
2. 如何启用组件
播放器提供了components属性通过给components赋值让播放器使用组件此属性的类型为Array如果组件创建是构造函数没有初始参数直接把组件类型作为值比如components :[staticADComponent]否则通过对象字面量的形式指定类型和参数参数也是一个数组比如 components :[{type:staticADComponent,args:[1,2]}]如果需要获取实例的组件需要设置name属性。
名称说明name组件名称可用通过名称得到组件type组件类型args组件的参数
启用组件
var player new Aliplayer({id: J_prismPlayer,autoplay: true,playsinline:true,components:[{type:StaticAdComponent,args:[http://cdnoss.youkouyang.com/cover.png]},{name:adcomponent,type:StaticAdComponent}] });
3. 如何获取组件
有的场景下需要获取组件做一下事情比如调用组件里的方法这时可以通过播放器的getComponent方法获取参数为组件的名字。 var component player.getComponent(adcomponent);
目前Aliplayer已经实现了8个常用的组件并且开源于github用户可以获取实现的代码并且也可以贡献自己的代码和建议。 • 记忆播放 • 开始广告 • 暂停广告 • 播放下一个 • 播放列表 • 旋转和镜像 • 视频广告 • 弹幕 • 试看
原文链接
本文为云栖社区原创内容未经允许不得转载。
