全部产品
Search
文档中心

视频点播:实现自定义组件

更新时间:Mar 23, 2022

Aliplayer2.3.0以上版本支持用户自定义组件,通过自定义组件用户可以在播放生命周期的某个节点插入自己的逻辑和实现自己的功能,比如弹幕、列表等。

生命周期节点

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

名称

说明

init

创建实例的时候调用,设置的初始参数在构建对象时,会传递给init方法。

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

设置components属性

定义好组件以后,需要注入播放器,让组件运行起来。设置组件提供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']},
     notParameComponent,
     {name:'adComponent1',type:notParameComponent}
     ]                 
    });

获取组件

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

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