如何使用用户自定义组件_视频点播(VOD)-阿里云帮助中心

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

生命周期节点

使用Aliplayer的关键方法名称及说明，如下表所示。

名称	说明
init	创建实例的时候调用，设置的初始参数在构建对象时，会传递给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://example.aliyundoc.com/cover.png']},
     notParameComponent,
     {name:'adComponent1',type:notParameComponent}
     ]                 
    });

获取组件

提供getComponent方法获取实例组件，参数为组件的名称。

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