Develop custom components - ApsaraVideo VOD - Centre de documentation Alibaba Cloud

En plus des composants officiels, développez des composants personnalisés pour répondre à vos besoins métier. Vous pouvez également étendre les composants officiels pour implémenter des fonctionnalités telles que les commentaires en direct et les listes.

Nœuds du cycle de vie

Méthode	Description
init/constructor	Appelée lors de la création d'une instance. Définissez dans cette fonction les paramètres d'entrée requis par le composant.
createEl	Crée l'interface utilisateur (UI) des composants. Le paramètre correspond à la div du conteneur du lecteur.
created	Indique que le lecteur est créé et que ses API sont disponibles.
ready	La vidéo est prête à être lue.
play	La lecture démarre.
pause	La lecture est mise en pause.
playing	La vidéo est en cours de lecture.
waiting	Le lecteur attend des données.
timeupdate	Déclenché lorsque l'événement de lecture change. Utilisez la propriété `timeStamp` du deuxième paramètre pour obtenir le temps de lecture.
error	Une erreur de lecture se produit.
ended	La lecture prend fin.
dispose	Le lecteur est détruit.

Implémentation

Méthode 1 : Utiliser la méthode `Component` fournie par 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éthode 2 : Utiliser une classe ES6

Remarque

Si votre projet utilise la syntaxe ES6 et est construit avec Webpack ou Babel, nous vous recommandons cette méthode.

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

Définir les propriétés lors de l'enregistrement des composants

Après avoir défini un composant, injectez-le dans le lecteur pour l'exécuter. Lors de l'enregistrement d'un composant, configurez trois propriétés, comme détaillé dans le tableau ci-dessous.

Propriété	Description
name	Nom unique du composant, utilisé pour le récupérer.
type	Type du composant.
args	Paramètres du composant.

Le code suivant présente les paramètres initiaux d'un composant.

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

Récupérer un composant

Utilisez la méthode getComponent pour récupérer une instance d'un composant. La méthode prend le nom unique du composant comme paramètre.

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