開發自訂群組件 - ApsaraVideo VOD

除了官方提供的組件，您也可自行開發滿足您業務需要的組件，也可在官方組件基礎上進行二次開發，實現如彈幕、列表等組件功能。

生命週期節點

使用Aliplayer的關鍵方法名稱及說明，如下表所示。

名稱	說明
init/constructor	建立執行個體的時候調用，可在此函數中設定組件需要的入參。
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();
  }
}

註冊組件時設定屬性

定義好組件以後，需要注入播放器，讓組件運行起來。設定組件提供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"],
    }
  ],
});

擷取組件

提供getComponent方法擷取組件執行個體，參數為組件的名稱。

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