Desenvolver componentes personalizados - ApsaraVideo VOD: Central de Documentação do Alibaba Cloud

Além dos componentes oficiais, você pode desenvolver componentes personalizados para atender às necessidades do seu negócio. Também é possível personalizar componentes oficiais para implementar recursos como comentários ao vivo e listas.

Nós do ciclo de vida

Método	Descrição
init/constructor	Invocado na criação da instância. Defina nesta função os parâmetros de entrada necessários para o componente.
createEl	Cria a interface do usuário (UI) dos componentes. O parâmetro corresponde à Div no contêiner do player.
created	Indica que o player foi criado e as operações da API do player estão disponíveis para chamada.
ready	O vídeo está pronto para reprodução.
play	Inicia a reprodução.
pause	Pausa a reprodução.
playing	O vídeo está em execução.
waiting	O player aguarda dados.
timeupdate	Disparado quando o evento de reprodução muda. Use a propriedade timeStamp do segundo parâmetro para obter o tempo de reprodução.
error	Ocorre um erro de reprodução.
ended	Finaliza a reprodução.
dispose	Destrói o player.

Implementação

Método 1: Usar o método Component fornecido pelo Aliplayer

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

Método 2: Usar uma classe ES6

Nota

Recomendamos este método caso seu projeto use sintaxe ES6 e seja compilado com Webpack ou 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();
  }
}

Definir propriedades ao registrar componentes

Após definir um componente, injete-o no player para ative sua execução. Durante o registro, configure três propriedades, conforme detalhado na tabela abaixo.

Propriedade	Descrição
name	Nome exclusivo do componente, usado para recuperá-lo.
type	Tipo do componente.
args	Parâmetros do componente.

O código a seguir apresenta os parâmetros iniciais de um componente.

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

Recuperar um componente

Use o método getComponent para recuperar a instância de um componente. Esse método recebe o nome exclusivo do componente como parâmetro.

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