Develop custom components - ApsaraVideo VOD - Alibaba Cloud Dokümantasyon Merkezi

Resmi bileşenlere ek olarak, iş ihtiyaçlarınızı karşılamak için özel bileşenler geliştirebilirsiniz. Ayrıca canlı yorumlar ve listeler gibi özellikleri uygulamak amacıyla resmi bileşenleri temel alarak özel geliştirmeler yapabilirsiniz.

Yaşam döngüsü düğümleri

Yöntem	Açıklama
init/constructor	Bir örnek oluşturulduğunda çağrılır. Bu işlevde bileşen için gereken giriş parametrelerini ayarlayabilirsiniz.
createEl	Bileşenlerin kullanıcı arayüzünü (UI) oluşturur. Parametre, oynatıcı kapsayıcısındaki Div öğesidir.
created	Oynatıcının oluşturulduğunu ve oynatıcı API'lerinin çağrılabileceğini belirtir.
ready	Video oynatılmaya hazırdır.
play	Oynatma başlar.
pause	Oynatma duraklatılır.
playing	Video oynatılıyor.
waiting	Oynatıcı veri bekliyor.
timeupdate	Oynatma olayı değiştiğinde tetiklenir. Oynatma süresini almak için ikinci parametrenin timeStamp özelliğini kullanın.
error	Oynatma hatası oluşur.
ended	Oynatma sona erer.
dispose	Oynatıcı yok edilir.

Uygulama

1. Yöntem: Aliplayer tarafından sağlanan Component yöntemini kullanın

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. Yöntem: ES6 sınıfı kullanın

Not

Projeniz ES6 sözdizimini kullanıyor ve Webpack veya Babel ile derleniyorsa bu yöntemi öneririz.

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

Bileşenleri kaydederken özellikleri ayarlayın

Bir bileşen tanımlandıktan sonra çalışmasını sağlamak için oynatıcıya enjekte edilmelidir. Bir bileşeni kaydederken aşağıdaki tabloda ayrıntılı olarak açıklanan üç özelliği yapılandırabilirsiniz.

Özellik	Açıklama
name	Bileşenin benzersiz adı; bu ad bileşeni almak için kullanılabilir.
type	Bileşen türü.
args	Bileşenin parametreleri.

Aşağıdaki kod, bir bileşenin ilk parametrelerini göstermektedir.

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

Bir bileşeni alın

Bir bileşen örneğini almak için getComponent yöntemini kullanın. Bu yöntem, bileşenin benzersiz adını parametre olarak alır.

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