阿里云Aliplayer播放器

自定义组件的实现

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组件有提供两种方式的实现