Kembangkan komponen kustom - ApsaraVideo VOD

Selain komponen resmi, Anda dapat mengembangkan komponen sendiri untuk memenuhi kebutuhan bisnis. Anda juga dapat menyesuaikan komponen resmi guna mengimplementasikan fitur seperti komentar langsung dan daftar.

Node siklus hidup

Tabel berikut menjelaskan metode utama yang digunakan dalam Pemutar Video Apsara.

Metode	Deskripsi
init/constructor	Dipanggil saat sebuah instans dibuat. Anda dapat menetapkan parameter input yang diperlukan oleh komponen dalam fungsi ini.
createEl	Membuat antarmuka pengguna (UI) komponen. Parameternya adalah Div dalam kontainer pemutar.
created	Menunjukkan bahwa pemutar telah dibuat dan operasi API pemutar dapat dipanggil.
ready	Menunjukkan bahwa video siap diputar.
play	Memulai pemutaran.
pause	Menunjukkan bahwa pemutar menjeda video.
playing	Menunjukkan bahwa pemutar sedang memutar video.
waiting	Menunjukkan bahwa pemutar sedang menunggu data.
timeupdate	Menunjukkan perubahan pada event pemutaran. Waktu pemutaran dapat diperoleh melalui atribut timeStamp dari parameter kedua.
error	Menunjukkan terjadi kesalahan pemutaran.
ended	Menunjukkan bahwa pemutaran selesai.
dispose	Menghancurkan pemutar.

Implementasi

Metode 1: Panggil metode Component yang disediakan oleh Pemutar Video Apsara

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

Metode 2: Gunakan kelas yang disediakan oleh ECMAScript 6

Catatan

Metode ini direkomendasikan jika proyek Anda dibangun menggunakan ECMAScript 6 dengan webpack atau 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();
  }
}

Tetapkan atribut saat mendaftarkan komponen

Setelah mendefinisikan komponen, Anda perlu menambahkannya ke konfigurasi pemutar agar dapat digunakan. Tabel berikut menjelaskan atribut yang harus ditetapkan untuk komponen tersebut.

Atribut	Deskripsi
name	Nama komponen. Pemutar memperoleh komponen melalui nama komponen tersebut.
type	Jenis komponen.
args	Parameter komponen.

Pada kode berikut, semua parameter merupakan parameter awal komponen.

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"],
    }
  ],
});

Peroleh komponen

Metode getComponent disediakan untuk memperoleh instans komponen. Parameter metode ini adalah nama komponen.

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