a∨在线视频播放,精品国产免费拍拍拍网站,人妻无码系列一区二区三区

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');

日本熟妇hd丰满老熟妇,中文字幕一区二区三区在线不卡 ,亚洲成片在线观看,免费女同在线一区二区

實現自定義組件

生命周期節點

自定義組件的實現