摘要：所以，支持自定義的新版應(yīng)運(yùn)而生。組件的實(shí)現(xiàn)方式，用戶(hù)如何快速自定義開(kāi)發(fā)組件提供了兩種方式讓用戶(hù)去開(kāi)發(fā)自己的播放器組件的類(lèi)型定義一個(gè)組件當(dāng)您的項(xiàng)目是使用的語(yǔ)法，通過(guò)或者構(gòu)建時(shí)，建議使用這種方式。

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

阿里云播放器SDK（ApsaraVideo for Player SDK）是阿里視頻云端到云到端服務(wù)的重要一環(huán)，除了支持點(diǎn)播和直播的基礎(chǔ)播放功能外，還深度融合視頻云業(yè)務(wù)，支持視頻的加密播放、安全下載、首屏秒開(kāi)、低延時(shí)等業(yè)務(wù)場(chǎng)景，為用戶(hù)提供簡(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ǔ)能力，但是用戶(hù)會(huì)有一些更上層和業(yè)務(wù)相關(guān)的一些需求，并且基于用戶(hù)本身的需求都會(huì)存在個(gè)性化差異，比如彈幕、跑馬燈、視頻列表等等。

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

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

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

1、 實(shí)現(xiàn)簡(jiǎn)單：用戶(hù)只要有前端的基本知識(shí)，就可以開(kāi)發(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、 開(kāi)源的：每個(gè)開(kāi)源組件都包含了通用的基本功能，用戶(hù)可以在開(kāi)源的基礎(chǔ)上實(shí)現(xiàn)自己的個(gè)性化需求，給用戶(hù)更大的自主權(quán)。

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

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

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

b. 使用Aliplayer提供的Component方法

2. 如何啟用組件

播放器提供了components屬性，通過(guò)給components賦值，讓播放器使用組件，此屬性的類(lèi)型為Array，如果組件創(chuàng)建是構(gòu)造函數(shù)沒(méi)有初始參數(shù)，直接把組件類(lèi)型作為值，比如：components :[staticADComponent]，否則通過(guò)對(duì)象字面量的形式指定類(lèi)型和參數(shù)，參數(shù)也是一個(gè)數(shù)組，比如： components :[{type:staticADComponent,args:[1,2]}]，如果需要獲取實(shí)例的組件，需要設(shè)置name屬性。

啟用組件

3. 如何獲取組件

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

目前，Aliplayer已經(jīng)實(shí)現(xiàn)了8個(gè)常用的組件，并且開(kāi)源于github，用戶(hù)可以獲取實(shí)現(xiàn)的代碼，并且也可以貢獻(xiàn)自己的代碼和建議。

? 記憶播放

? 開(kāi)始廣告

? 暫停廣告

? 播放下一個(gè)

? 播放列表

? 旋轉(zhuǎn)和鏡像

? 視頻廣告

? 彈幕

? 試看

如果用戶(hù)實(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/ali...

Aliplayer Github：

https://github.com/aliyunvide...

本文作者：樰籬

閱讀原文

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