摘要：是一款輕量級(jí)易擴(kuò)展的播放器，是為解決一些中小型的視頻業(yè)務(wù)場(chǎng)景。同時(shí)各插件由于是面向的播放器接口，插件不知道插件的存在，因此能極大地降低各插件功能間的耦合。

larkplayer 是一款輕量級(jí) & 易擴(kuò)展的 html5 播放器，是為解決一些中小型的視頻業(yè)務(wù)場(chǎng)景。這些業(yè)務(wù)不一定需要大而全的解決方案，并且他們往往有自己的定制化需求。

為什么要編寫 larkplayer？（注意，這里面有一些我的個(gè)人觀點(diǎn)）

目前 html5 web player 社區(qū)已經(jīng)比較成熟，videojs 和 jwplayer 等都是優(yōu)秀的解決方案。然而，社區(qū)的兩極分化也比較嚴(yán)重：

排名靠前的播放器基本都是一種『大而全』的狀態(tài)：功能豐富&定制化，體積動(dòng)輒幾百K。對(duì)于一些相對(duì)簡(jiǎn)單的業(yè)務(wù)，還是有點(diǎn)太重了，尤其是在移動(dòng)端，在做擴(kuò)展時(shí)也可能由于一些已有的功能而礙手礙腳

一些小一點(diǎn)的播放器，往往只是解決了自己特定的業(yè)務(wù)場(chǎng)景的問(wèn)題，缺乏擴(kuò)展性

一些播放器存在對(duì)某些大型庫(kù)（比如 jQuery、AngularJS 等）的依賴，通用性與可移植性不是很好

因此，對(duì)于一些中小型的視頻業(yè)務(wù)場(chǎng)景，其實(shí)并沒(méi)有一個(gè)舒服的播放器方案可供選擇。

如何解決上訴問(wèn)題？

業(yè)務(wù)上：

輕量，盡量不提供"多余"的功能，代碼體積小

易擴(kuò)展，能輕易地支持如廣告、皮膚、統(tǒng)計(jì)等各種定制化需求

代碼上：

解決兼容性問(wèn)題，把瑣碎的細(xì)節(jié)留在內(nèi)部，對(duì)外接口統(tǒng)一

插件化機(jī)制，解耦各功能，提供方便擴(kuò)展的接口與方式

原生 javascript 編寫，減少對(duì)類庫(kù)的依賴，便于在各種環(huán)境下使用與移植

larkplayer 的靈感來(lái)自 videojs，采用插件化的設(shè)計(jì)：播放器本身只是一個(gè)精巧的核心，包含一些必備的機(jī)制和 API，其余功能由插件提供。
你可以自由選擇和編寫自己的插件，做到按需取用，漸進(jìn)增強(qiáng)。在 ugilfy + gzip 后，larkplayer 代碼體積約 12KB.

Html5 模塊負(fù)責(zé)抹平兼容性問(wèn)題，對(duì)外提供統(tǒng)一的 API

Event 模塊提供事件機(jī)制，支持原生事件及自定義事件

Plugin 模塊用于提供插件機(jī)制，為各類插件提供基類，約定其接口及運(yùn)行方式

Util 中包含一些常用的工具方法，比如對(duì) DOM 的一些便捷操作函數(shù)

Player 模塊聚合以上模塊，用以實(shí)例化播放器以及對(duì)外提供接口

事件作為播放器內(nèi)部核心的溝通機(jī)制，為內(nèi)部的狀態(tài)流轉(zhuǎn)以及后續(xù)的擴(kuò)展提供底層支持。
目前自定義事件系統(tǒng)的實(shí)現(xiàn)方式主要有 2 種：

DOM Event：HTML 原生 API，能夠監(jiān)聽(tīng) DOM 相關(guān)事件，支持自定義事件，具有捕獲、冒泡機(jī)制，需要一些兼容性處理

EventEmitter：JS 實(shí)現(xiàn)的事件機(jī)制，核心是一套『訂閱發(fā)布模式』，允許自定義事件，擁有更加靈活的 API，無(wú)法監(jiān)聽(tīng) DOM 相關(guān)事件，基本無(wú)兼容性問(wèn)題

由于 DOM Event 能夠監(jiān)聽(tīng) DOM 相關(guān)事件，同時(shí)冒泡機(jī)制對(duì)后續(xù) UI 插件的控制有一定的幫助，因此選用其作為自定義事件系統(tǒng)實(shí)現(xiàn)的基礎(chǔ)。

通過(guò) DOM Event 實(shí)現(xiàn)以下幾類主要功能：

事件監(jiān)聽(tīng)

事件注銷

支持自定義事件類型

支持手動(dòng)觸發(fā)事件（通過(guò) JS 觸發(fā)而不是用戶交互觸發(fā)）

DOM Event 流程可通過(guò)下圖概覽：

插件是一種常用的『依賴反轉(zhuǎn)』的方式，使得播放器不必依賴外部或下層組件，而是所有外部插件都依賴播放器本身。
同時(shí)各插件由于是面向的播放器接口，插件 A 不知道 插件 B 的存在，因此能極大地降低各插件（功能）間的耦合。

如何設(shè)計(jì)插件的類型和接口便關(guān)系到后續(xù)長(zhǎng)期的發(fā)展，經(jīng)過(guò)業(yè)務(wù)經(jīng)驗(yàn)的總結(jié)以及對(duì)其他解決方案的參考，總結(jié)出以下 3 類插件類型：

UI 插件，DOM 相關(guān)，往往是要添加某些樣式或交互，如皮膚、彈幕等

MSE 插件，播放技術(shù)相關(guān)，基于 Media Source Extension，可擴(kuò)展播放器對(duì)其他視頻類型的支持，如 m3u8、flv 等

其他插件，可以看做是一種保留類型，上述兩種類型無(wú)法滿足時(shí)，落到此類型，后續(xù)某類新的插件高頻出現(xiàn)時(shí)，可再次抽離出新的類型

這幾類插件如何運(yùn)行呢？這里簡(jiǎn)單介紹下，具體可以參見(jiàn)設(shè)計(jì)文檔或源碼。

1.UI 插件

Component 類作為基類，提供事件、DOM 操作工具函數(shù)支持，可獲取到播放器引用

組件化的方式開(kāi)發(fā)，通過(guò)構(gòu)建工具與代碼配合，支持 JSX 語(yǔ)法

可在播放器初始化時(shí)傳遞參數(shù)，以及從播放器上獲取插件實(shí)例

2.MSE 插件

MSEHandler 類作為基類，提供事件支持，可獲取播放器引用，給予修改播放器 play 等方法的權(quán)限

可在播放器初始化時(shí)傳遞參數(shù)，以及從播放器上獲取插件實(shí)例

3.其他插件

Plugin 類作為基類，提供事件支持，可獲取播放器引用

可在播放器初始化時(shí)傳遞參數(shù)，以及從播放器上獲取插件實(shí)例

我們已經(jīng)在多個(gè)業(yè)務(wù)中使用 larkplayer，并開(kāi)發(fā)了十幾個(gè)插件用于解決各種業(yè)務(wù)需求，支持了千萬(wàn)級(jí)/天的視頻播放。
larkplayer 及其插件均支持以 script、npm 以及各種模塊化的方式引用，你可以怎么舒服怎么來(lái)。

larkplayer 使用方式十分簡(jiǎn)單，將以下代碼粘貼到任意編輯器中，用瀏覽器打開(kāi)即可運(yùn)行，更詳細(xì)的使用文檔可以參考這里。

larkplayer 本身已經(jīng)包含一些基礎(chǔ)而核心的功能和機(jī)制，比如

功能上，支持 pause()、play()、requestFullscreen()、exitFullscreen()、currentTime(second)(跳轉(zhuǎn)到某一時(shí)刻) 等

事件上，可以監(jiān)聽(tīng) play、pause、end、error、timeupdate、loadstart、fullscreen 等

更多的功能和事件可以查看 API。

另外有一些常用但可能不是必須的功能，比如自定義樣式、m3u8 文件播放、斷點(diǎn)續(xù)播等，我們已經(jīng)提供了一些插件：

larkplayer-ui 提供了一套適應(yīng) PC 與 WAP 的皮膚

larkplayer-hls 提供播放 m3u8 文件的功能

larkplayer-vr 提供全景視頻播放功能

larkplayer-auto-resume 提供自動(dòng)續(xù)播功能

larkplayer-play-muted 提供靜音播放時(shí)的 UI

插件的使用也十分簡(jiǎn)單，只需在 larkplayer 之后引入插件即可。
下面的代碼為播放器添加了自定義的樣式以及斷點(diǎn)續(xù)播功能，將其粘貼到任意編輯器，用瀏覽器打開(kāi)即可運(yùn)行。

larkplayer-ui 插件 能夠自適應(yīng) PC 與 WAP 展現(xiàn)以下兩種樣式：

WAP 端樣式

PC 端樣式

值得一提的是，larkplayer-ui 是一種典型的 UI 類插件，這類插件支持 JSX 語(yǔ)法，書(shū)寫起來(lái)非常方便。比如 WAP 端的樣式，在代碼中最終就像這樣：

controls-mobile.js

import classnames from "classnames";
import {Component, util} from "larkplayer";
import ControlBar from "./control-bar";
import ProgressBarSimple from "./progress-bar-simple";
import Loading from "../component/loading";
import PlayButton from "../component/play-button";
import NotSupport from "../component/not-support";
import Error from "../component/error";

export default class ControlsMobile extends Component {
    createEl() {
        return (
            

                
                
                
                
                
                
            
        );
    }
}

如果你有興趣，也可以自己查看源碼。

larkplayer 的這種設(shè)計(jì)，使得他可能存在大量的插件，每次調(diào)用播放器后面都跟著大量的插件引用會(huì)導(dǎo)致重復(fù)的代碼。這里給出一種解決方案：

1.新建 common/player.js 文件，將 larkplayer 和公用的插件封裝在里面，業(yè)務(wù)上調(diào)用 common/player.js 即可

/**
 * @file 視頻播放器，包含 larkplayer 及所有公用插件
 */

import larkplayer from "larkplayer";
import "larkplayer-ui";
import "larkplayer-hls";
import "larkplaer-auto-resume";
...

export default larkplayer; 

2.對(duì)于只在特定場(chǎng)景使用的插件，由于引用次數(shù)較少，在對(duì)應(yīng)的場(chǎng)景引用即可

/**
 * @file VR 視頻播放
 */

import player from "common/player.js";
import "larkplayer-vr";

const myPlayer = player("video-el");
...

以下是 3 類插件的編寫示例：

UI 插件編寫

MSE 插件編寫

普通插件編寫

采用 karma + jasmine 完成單測(cè)編碼編寫&運(yùn)行
BrowserStack 提供真機(jī)環(huán)境用于測(cè)試回歸

一些示例、思想說(shuō)明的文檔手動(dòng)編寫

API 一類的文檔由 nodejs 插件 jsdoc 從代碼注釋生成

采用 grunt 構(gòu)建，完成模塊化、打包、壓縮、代碼轉(zhuǎn)換等工作。

以下是目前整個(gè)項(xiàng)目的結(jié)構(gòu)組成

最后，如果你已經(jīng)看到了這里，不妨到 github 上點(diǎn)個(gè) star 吧，謝謝 :)