カスタムコンポーネントを開発する - ApsaraVideo VOD - Alibaba Cloud ドキュメントセンター

公式コンポーネントに加えて、ビジネスニーズに合わせて独自のコンポーネントを開発できます。また、公式コンポーネントに基づいてカスタム開発を行い、弾幕やリストなどの機能を実装することもできます。

ライフサイクルノード

次の表では、ApsaraVideo Player で使用される主要なメソッドについて説明します。

メソッド	説明
init/constructor	インスタンスが作成されると呼び出されます。この関数で、コンポーネントに必要な入力パラメーターを設定できます。
createEl	コンポーネントのユーザーインターフェース (UI) を作成します。パラメーターは、プレーヤーコンテナー内の Div です。
created	プレーヤーが作成され、プレーヤーの API 操作を呼び出すことができることを示します。
ready	ビデオの再生準備ができたことを示します。
play	再生を開始します。
pause	プレーヤーがビデオを一時停止したことを示します。
playing	プレーヤーがビデオを再生していることを示します。
waiting	プレーヤーがデータを待機していることを示します。
timeupdate	再生イベントの変更を示します。再生時間は、2 番目のパラメーターの timeStamp 属性によって取得できます。
error	再生エラーを示します。
ended	再生が終了したことを示します。
dispose	プレーヤーを破棄します。

実装

方法 1: ApsaraVideo Player が提供する 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();
  },
});

方法 2: ECMAScript 6 が提供するクラスを使用する

説明

この方法は、プロジェクトが webpack または babel を使用して ECMAScript 6 でビルドされている場合に推奨されます。

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

コンポーネント登録時の属性設定

コンポーネントを定義した後、コンポーネントを使用できるように、プレーヤーの構成にコンポーネントを追加する必要があります。次の表に、コンポーネントに設定する必要がある属性を示します。

属性	説明
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');