阿裏雲播放器SDK（ApsaraVideo for Player SDK）是阿裏視頻雲端到雲到端服務的重要一環，除了支持點播和直播的基礎播放功能外，還深度融合視頻雲業務，支持視頻的加密播放、安全下載、首屏秒開、低延時等業務場景，為用戶提供簡單、快速、安全、穩定的視頻播放服務。

Aliplayer Web播放器分為H5和Flash兩個，Flash播放器隨著技術的發展會逐漸被邊緣化，而H5播放器會更加普及。播放器端上已經實現了截圖、國際化、變速、UI自定義、微信同層播放、自適應播放、加密播放、H5播放flv、自定義插件等功能。

雖然Aliplayer已經具備相對完善的公共基礎能力，但是用戶會有一些更上層和業務相關的一些需求，並且基於用戶本身的需求都會存在個性化差異，比如彈幕、×××燈、視頻列表等等。

因此，Aliplayer希望提供一種方便、簡單、靈活的機制，讓客戶能夠擴展播放器的功能，並且Aliplayer提供一些組件的基本實現，用戶可以基於這些開源的組件實現個性化功能，比如自定義UI和自己App server的交互等等，而不用從頭開始開發一些功能，節省時間和精力。所以，支持自定義的新版Aliplayer應運而生。

自定義組件的原理？
Aliplayer希望有一種很簡單的方式去定義組件，讓用戶的學習成本近乎於零。因此定義出整個播放器的生命周期的重要階段，作為函數鉤子，用戶可以通過函數鉤子實現每個階段的自定義邏輯，下面的圖列出了主要生命周期，標示在函數的周期內會發生的一些階段：

每個階段的說明：

組件系統特點：
1、 實現簡單：用戶只要有前端的基本知識，就可以開發一個插件，並且支持ES5和ES6的語法，只要定義一個Function或者Class，根據自己的業務需要實現生命周期函數。

2、 實例的：組件註冊到播放器，在播放創建的過程中也創建組件實例，組件是可以保存狀態的，因此一個組件定義，可以註冊多個到播放器，通過傳遞不通的參數，構建不同的組件，具有不同的行為。

3、 開源的：每個開源組件都包含了通用的基本功能，用戶可以在開源的基礎上實現自己的個性化需求，給用戶更大的自主權。

組件的實現方式，用戶如何快速自定義開發？

1. 組件提供了兩種方式讓用戶去開發自己的播放器組件：
   a. ES6的class類型定義一個組件
   
   當您的項目是使用ES6的語法，通過webpack或者babel構建時，建議使用這種方式。

/**

• 靜態廣告組件
  */
  export default class StaticADComponent
  {
  /**

  • 構造函數，在new對象時調用
  • @param {string} adAddress - 廣告視頻地址
  • @param {string} toAddress - 廣告鏈接地址
    */
    constructor(adAddress,toAddress) {
    this.adAddress = adAddress;
    this.toAddress = toAddress;
    this.$html = $(html);
    }

  /**

  • 創建廣告Dom元素
    */
    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);
    }

  /**

  • 隱藏廣告
    */
    play(player,e)
    {
    this.$html.hide();
    }

  /**

  • 顯示廣告
    */
    pause(player,e)
    {
    this.$html.show();
    }

  /**

  • 隱藏廣告
    */
    playing(player,e)
    {
    this.$html.hide();
    }

  /**

  • 顯示廣告
    */
    ended(player,e)
    {
    this.$html.show();
    }
    }

b. 使用Aliplayer提供的Component方法
/**

• 靜態廣告組件
  */
  const StaticADComponent = Aliplayer.Component({
  /**

  • 初始函數，在new對象時調用
  • @param {string} adAddress - 廣告視頻地址
  • @param {string} toAddress - 廣告鏈接地址
    */
    init:function(adAddress,toAddress)
    {
    this.adAddress = adAddress;
    this.toAddress = toAddress;
    this.$html = $(html);
    },

  /**

  • 創建廣告Dom元素
    */
    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();
    },
    /**
  • 隱藏廣告
    */
    playing:function(player,e)
    {
    this.$html.hide();
    },
    waiting:function(player,e)
    {
    },
    timeupdate:function(player,e)
    {
    },
    error:function(player,e)
    {
    },
    /**
  • 顯示廣告
    */
    ended:function(player,e)
    {
    this.$html.show();
    }
    });

2. 如何啟用組件
   播放器提供了components屬性，通過給components賦值，讓播放器使用組件，此屬性的類型為Array，如果組件創建是構造函數沒有初始參數，直接把組件類型作為值，比如：components :[staticADComponent]，否則通過對象字面量的形式指定類型和參數，參數也是一個數組，比如： components :[{type:staticADComponent,args:[1,2]}]，如果需要獲取實例的組件，需要設置name屬性。

名稱 說明
name 組件名稱，可用通過名稱得到組件
type 組件類型
args 組件的參數
啟用組件
var player = new Aliplayer({
id: "J_prismPlayer",
autoplay: true,
playsinline:true,
components:[
{type:StaticAdComponent,args:[‘http://cdnoss.youkouyang.com/cover.png‘]},
{name:‘adcomponent‘,type:StaticAdComponent}
]
});

3. 如何獲取組件
   有的場景下，需要獲取組件做一下事情，比如調用組件裏的方法，這時可以通過播放器的getComponent方法獲取，參數為組件的名字。

   var component = player.getComponent(‘adcomponent‘);

目前，Aliplayer已經實現了8個常用的組件，並且開源於github，用戶可以獲取實現的代碼，並且也可以貢獻自己的代碼和建議。
? 記憶播放
? 開始廣告
? 暫停廣告
? 播放下一個
? 播放列表
? 旋轉和鏡像
? 視頻廣告
? 彈幕
? 試看

如果用戶實現了Aliplayer的組件，並且想貢獻出來，可以聯系我們，我們會在github首頁添加導航，鏈接到您的github項目上。

Aliplayer體驗館：
https://player.alicdn.com/aliplayer/presentation/index.html

Aliplayer Github：
https://github.com/aliyunvideo/AliyunPlayer_Web

原文鏈接

本文為雲棲社區原創內容，未經允許不得轉載。

如何利用阿裏視頻雲開源組件，快速自定義你的H5播放器？