實現自訂群組件 - ApsaraVideo 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');