Develop custom components for ApsaraVideo Player SDK - ApsaraVideo VOD

In addition to the official components, you can develop custom components to meet your business needs. You can also perform custom development based on official components to implement features such as live comments and lists.

Lifecycle nodes

Method	Description
init/constructor	Called when an instance is created. You can set the input parameters required by the component in this function.
createEl	Creates the user interface (UI) of components. The parameter is the Div in the player container.
created	Indicates that the player is created and the API operations of the player can be called.
ready	The video is ready to play.
play	Playback starts.
pause	Playback is paused.
playing	The video is playing.
waiting	The player is waiting for data.
timeupdate	Triggered when playback event changes. Use the timeStamp property of the second parameter to get the playback time.
error	Playback error occurs.
ended	Playback ends.
dispose	The player is destroyed.

Implementation

Method 1: Use the Component method provided by 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();
  },
});

Method 2: Use an ES6 class

Note

If your project uses ES6 syntax and is built with Webpack or Babel, we recommend this method.

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

Set properties when registering components

After a component is defined, it must be injected into the player to enable it to run. When registering a component, you can configure three properties, as detailed in the table below.

Property	Description
name	A unique name for the component, which can be used to retrieve it.
type	The component type.
args	The parameters of the component.

The following code shows the initial parameters of a component.

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

Retrieve a component

Use the getComponent method to retrieve an instance of a component. The method takes the component's unique name as its parameter.

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