全部产品
云市场

如何实现自定义组件

更新时间:2019-09-16 19:49:01

自定义组件的实现

Aliplayer2.3.0以上版本支持用户自定义组件,通过自定义组件用户可以在播放生命周期的某个节点插入自己的逻辑和实现自己的功能,比如弹幕、列表等。

组件

生命周期节点

名称 说明
init new实例的时候调用,设置的初始参数在构建对象时,会传递给init方法
createEl 创建组件的UI, 参数为播放器容器的div
created 播放器创建完成,可以调用播放器的API了
ready 视频可播放状态
play 开始播放
pause 播放暂停
playing 正在播放
waiting 等待数据
timeupdate 播放事件改变,通过第二各参数的timeStamp属性得到播放时间
error 播放出错
ended 播放结束
dispose 播放器销毁

定义组件

有两种方法定义组件:

通过Aliplayer提供的Component方法

 var StaticADComponent = Aliplayer.Component({
    init:function(adAddress,toAddress)
    {
      this.adAddress = adAddress;
      this.toAddress = toAddress;
      this.$html = $(html);
    },
    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();
    }
});

使用ES6的class类

当您的项目是使用ES6的语法,通过webpack或者babel构建时,建议使用这种方式


export default class StaticADComponent
{
    constructor(adAddress,toAddress) {
      this.adAddress = adAddress;
      this.toAddress = toAddress;
      this.$html = $(html);
    }

    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);
    }


    ready(player,e)
    {
    }

    play(player,e)
    {
       this.$html.hide();
    }

    pause(player,e)
    {
       this.$html.show();
    }
}

设置components属性

定义好组件以后,需要注入播放器,让组件跑起来,下面的例子是一个组件需要初始参数,一个不需要。

设置组件提供3个属性:

名称 说明
name 组件名称,可用通过名称得到组件
type 组件类型
args 组件的参数
 var player = new Aliplayer({
    id: "J_prismPlayer",
     autoplay: true,
     isLive:false,
     playsinline:true,
     controlBarVisibility:"click",
     cover:"",
     components:[
     {name:'adComponent',type:StaticAdComponent,args:['http://cdnoss.youkouyang.com/cover.png']},
     notParameComponent,
     {name:'adComponent1',type:notParameComponent}
     ]                 
    });

获取组件

提供getComponent方法获取实例组件,参数为组件的名字


var component = player.getComponent('adComponent');

更多的细节可以参考aliplayer-components项目

StaticAdComponent组件有提供两种方式的实现