开发自定义组件_视频点播(VOD)-阿里云帮助中心

除了官方提供的组件，您也可自行开发满足您业务需要的组件，也可在官方组件基础上进行二次开发，实现如弹幕、列表等组件功能。

生命周期节点

使用Aliplayer的关键方法名称及说明，如下表所示。

名称	说明
init/constructor	创建实例的时候调用，可在此函数中设置组件需要的入参。
createEl	创建组件的UI，参数为播放器容器的div。
created	播放器创建完成，可以调用播放器的API。
ready	视频可播放状态。
play	开始播放。
pause	播放暂停。
playing	正在播放。
waiting	等待数据。
timeupdate	播放事件改变，通过第二个参数的timeStamp属性得到播放时间。
error	播放出错。
ended	播放结束。
dispose	播放器销毁。

自定义组件的实现

方式一：通过Aliplayer提供的Component方法

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

方式二：使用ES6的class类

说明

当您的项目是使用ES6的语法，通过webpack或者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();
  }
}

注册组件时设置属性

定义好组件以后，需要注入播放器，让组件运行起来。设置组件提供3个属性，如下表所示。

名称	说明
name	组件名称，可通过名称得到组件。
type	组件类型。
args	组件的参数。

以下示例代码，所有参数均为一个组件的初始参数。

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

获取组件

提供getComponent方法获取组件实例，参数为组件的名称。

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