摘要：?Aliplayer希望提供一種方便、簡(jiǎn)單、靈活的機(jī)制，讓客戶能夠擴(kuò)展播放器的功能，并且Aliplayer提供一些組件的基本實(shí)現(xiàn)，用戶可以基于這些開源的組件實(shí)現(xiàn)個(gè)性化功能，比如自定義UI和自己App server的交互等等，而不用從頭開始開發(fā)一些功能，節(jié)省時(shí)間和精力。

阿里云播放器SDK（ApsaraVideo for Player SDK）是阿里視頻云端到云到端服務(wù)的重要一環(huán)，除了支持點(diǎn)播和直播的基礎(chǔ)播放功能外，還深度融合視頻云業(yè)務(wù)，支持視頻的加密播放、安全下載、首屏秒開、低延時(shí)等業(yè)務(wù)場(chǎng)景，為用戶提供簡(jiǎn)單、快速、安全、穩(wěn)定的視頻播放服務(wù)。

Aliplayer Web播放器分為H5和Flash兩個(gè)，F(xiàn)lash播放器隨著技術(shù)的發(fā)展會(huì)逐漸被邊緣化，而H5播放器會(huì)更加普及。播放器端上已經(jīng)實(shí)現(xiàn)了截圖、國(guó)際化、變速、UI自定義、微信同層播放、自適應(yīng)播放、加密播放、H5播放flv、自定義插件等功能。

雖然Aliplayer已經(jīng)具備相對(duì)完善的公共基礎(chǔ)能力，但是用戶會(huì)有一些更上層和業(yè)務(wù)相關(guān)的一些需求，并且基于用戶本身的需求都會(huì)存在個(gè)性化差異，比如彈幕、跑馬燈、視頻列表等等。

因此，Aliplayer希望提供一種方便、簡(jiǎn)單、靈活的機(jī)制，讓客戶能夠擴(kuò)展播放器的功能，并且Aliplayer提供一些組件的基本實(shí)現(xiàn)，用戶可以基于這些開源的組件實(shí)現(xiàn)個(gè)性化功能，比如自定義UI和自己App server的交互等等，而不用從頭開始開發(fā)一些功能，節(jié)省時(shí)間和精力。所以，支持自定義的新版Aliplayer應(yīng)運(yùn)而生。

自定義組件的原理？

Aliplayer希望有一種很簡(jiǎn)單的方式去定義組件，讓用戶的學(xué)習(xí)成本近乎于零。因此定義出整個(gè)播放器的生命周期的重要階段，作為函數(shù)鉤子，用戶可以通過(guò)函數(shù)鉤子實(shí)現(xiàn)每個(gè)階段的自定義邏輯，下面的圖列出了主要生命周期，標(biāo)示在函數(shù)的周期內(nèi)會(huì)發(fā)生的一些階段：

每個(gè)階段的說(shuō)明：

名稱說(shuō)明init new實(shí)例的時(shí)候調(diào)用，設(shè)置的初始參數(shù)在構(gòu)建對(duì)象時(shí)，會(huì)傳遞給init方法createEl創(chuàng)建組件的UI， 參數(shù)為播放器容器的divcreated播放器創(chuàng)建完成，可以調(diào)用播放器的API了ready視頻可播放狀態(tài)play開始播放pause播放暫停playing正在播放waiting等待數(shù)據(jù)timeupdate播放事件改變，通過(guò)第二各參數(shù)的timestamp屬性得到播放時(shí)間error播放出錯(cuò)ended播放結(jié)束dispose播放器銷毀

組件系統(tǒng)特點(diǎn)：

1、 實(shí)現(xiàn)簡(jiǎn)單：用戶只要有前端的基本知識(shí)，就可以開發(fā)一個(gè)插件，并且支持ES5和ES6的語(yǔ)法，只要定義一個(gè)Function或者Class，根據(jù)自己的業(yè)務(wù)需要實(shí)現(xiàn)生命周期函數(shù)。

2、 實(shí)例的：組件注冊(cè)到播放器，在播放創(chuàng)建的過(guò)程中也創(chuàng)建組件實(shí)例，組件是可以保存狀態(tài)的，因此一個(gè)組件定義，可以注冊(cè)多個(gè)到播放器，通過(guò)傳遞不通的參數(shù)，構(gòu)建不同的組件，具有不同的行為。

3、 開源的：每個(gè)開源組件都包含了通用的基本功能，用戶可以在開源的基礎(chǔ)上實(shí)現(xiàn)自己的個(gè)性化需求，給用戶更大的自主權(quán)。

組件的實(shí)現(xiàn)方式，用戶如何快速自定義開發(fā)？

1. 組件提供了兩種方式讓用戶去開發(fā)自己的播放器組件：

a. ES6的class類型定義一個(gè)組件

當(dāng)您的項(xiàng)目是使用ES6的語(yǔ)法，通過(guò)webpack或者babel構(gòu)建時(shí)，建議使用這種方式。

/**
*?靜態(tài)廣告組件
*/export?default?class?StaticADComponent{????/**
????*?構(gòu)造函數(shù)，在new對(duì)象時(shí)調(diào)用
????*
????*?@param?{string}?adAddress?-?廣告視頻地址
????*?@param?{string}?toAddress?-?廣告鏈接地址
????*/
????constructor(adAddress,toAddress)?{??????this.adAddress?=?adAddress;??????this.toAddress?=?toAddress;??????this.$html?=?$(html);
????}????
????/**
????*?創(chuàng)建廣告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方法

/**
??*?靜態(tài)廣告組件
??*/
?const?StaticADComponent?=?Aliplayer.Component({????/**
????*?初始函數(shù)，在new對(duì)象時(shí)調(diào)用
????*
????*?@param?{string}?adAddress?-?廣告視頻地址
????*?@param?{string}?toAddress?-?廣告鏈接地址
????*/
????init:function(adAddress,toAddress)????{??????this.adAddress?=?adAddress;??????this.toAddress?=?toAddress;??????this.$html?=?$(html);
????},????/**
????*?創(chuàng)建廣告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屬性，通過(guò)給components賦值，讓播放器使用組件，此屬性的類型為Array，如果組件創(chuàng)建是構(gòu)造函數(shù)沒有初始參數(shù)，直接把組件類型作為值，比如：components :[staticADComponent]，否則通過(guò)對(duì)象字面量的形式指定類型和參數(shù)，參數(shù)也是一個(gè)數(shù)組，比如： components :[{type:staticADComponent,args:[1,2]}]，如果需要獲取實(shí)例的組件，需要設(shè)置name屬性。

名稱說(shuō)明name組件名稱，可用通過(guò)名稱得到組件type組件類型args組件的參數(shù)

啟用組件

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. 如何獲取組件

有的場(chǎng)景下，需要獲取組件做一下事情，比如調(diào)用組件里的方法，這時(shí)可以通過(guò)播放器的getComponent方法獲取，參數(shù)為組件的名字。

?var?component?=?player.getComponent('adcomponent');

目前，Aliplayer已經(jīng)實(shí)現(xiàn)了8個(gè)常用的組件，并且開源于github，用戶可以獲取實(shí)現(xiàn)的代碼，并且也可以貢獻(xiàn)自己的代碼和建議。
??記憶播放
??開始廣告
??暫停廣告
??播放下一個(gè)
??播放列表
??旋轉(zhuǎn)和鏡像
??視頻廣告?
??彈幕?
??試看

如果用戶實(shí)現(xiàn)了Aliplayer的組件，并且想貢獻(xiàn)出來(lái)，可以聯(lián)系我們，我們會(huì)在github首頁(yè)添加導(dǎo)航，鏈接到您的github項(xiàng)目上。

Aliplayer體驗(yàn)館：

https://player.alicdn.com/aliplayer/presentation/index.html

Aliplayer Github：

https://github.com/aliyunvideo/AliyunPlayer_Web

原文鏈接

本文為云棲社區(qū)原創(chuàng)內(nèi)容，未經(jīng)允許不得轉(zhuǎn)載。