Develop custom components - ApsaraVideo VOD - Alibaba Cloud Documentation Center

In addition to the official components, you can develop your own 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

The following table describes the key methods that are used in ApsaraVideo Player.

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	Indicates that the video is ready for playback.
play	Starts the playback.
pause	Indicates that the player pauses a video.
playing	Indicates that the player is playing a video.
waiting	Indicates that the player is waiting for data.
timeupdate	Indicates the changes to playback events. The playback time can be obtained by the timeStamp attribute of the second parameter.
error	Indicates a playback error.
ended	Indicates that the playback ends.
dispose	Destroys a player.

Implementation

Method 1: Call the Component method provided by ApsaraVideo Player

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 the class that is provided by ECMAScript 6

Note

This method is recommended when your project is built in ECMAScript 6 by using webpack or 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();
  }
}

Set attributes when registering components

After you define a component, you need to add the component to the configurations of the player so that the component can be used. The following table describes the attributes that you need to set for the component.

Attribute	Description
name	The name of the component. The player obtains the component by the component name.
type	The component type.
args	The parameters of the component.

In the following code, all parameters are 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"],
    }
  ],
});

Obtain a component

The getComponent method is provided to obtain a component instance. The parameter is the name of the component.

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