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

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

為什么要編寫 larkplayer？（注意，這里面有一些我的個人觀點）

目前 html5 web player 社區已經比較成熟，videojs 和 jwplayer 等都是優秀的解決方案。然而，社區的兩極分化也比較嚴重：

排名靠前的播放器基本都是一種『大而全』的狀態：功能豐富&定制化，體積動輒幾百K。對于一些相對簡單的業務，還是有點太重了，尤其是在移動端，在做擴展時也可能由于一些已有的功能而礙手礙腳

一些小一點的播放器，往往只是解決了自己特定的業務場景的問題，缺乏擴展性

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

因此，對于一些中小型的視頻業務場景，其實并沒有一個舒服的播放器方案可供選擇。

如何解決上訴問題？

業務上：

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

易擴展，能輕易地支持如廣告、皮膚、統計等各種定制化需求

代碼上：

解決兼容性問題，把瑣碎的細節留在內部，對外接口統一

插件化機制，解耦各功能，提供方便擴展的接口與方式

原生 javascript 編寫，減少對類庫的依賴，便于在各種環境下使用與移植

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

Html5 模塊負責抹平兼容性問題，對外提供統一的 API

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

Plugin 模塊用于提供插件機制，為各類插件提供基類，約定其接口及運行方式

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

Player 模塊聚合以上模塊，用以實例化播放器以及對外提供接口

事件作為播放器內部核心的溝通機制，為內部的狀態流轉以及后續的擴展提供底層支持。
目前自定義事件系統的實現方式主要有 2 種：

DOM Event：HTML 原生 API，能夠監聽 DOM 相關事件，支持自定義事件，具有捕獲、冒泡機制，需要一些兼容性處理

EventEmitter：JS 實現的事件機制，核心是一套『訂閱發布模式』，允許自定義事件，擁有更加靈活的 API，無法監聽 DOM 相關事件，基本無兼容性問題

由于 DOM Event 能夠監聽 DOM 相關事件，同時冒泡機制對后續 UI 插件的控制有一定的幫助，因此選用其作為自定義事件系統實現的基礎。

通過 DOM Event 實現以下幾類主要功能：

事件監聽

事件注銷

支持自定義事件類型

支持手動觸發事件（通過 JS 觸發而不是用戶交互觸發）

DOM Event 流程可通過下圖概覽：

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

如何設計插件的類型和接口便關系到后續長期的發展，經過業務經驗的總結以及對其他解決方案的參考，總結出以下 3 類插件類型：

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

MSE 插件，播放技術相關，基于 Media Source Extension，可擴展播放器對其他視頻類型的支持，如 m3u8、flv 等

其他插件，可以看做是一種保留類型，上述兩種類型無法滿足時，落到此類型，后續某類新的插件高頻出現時，可再次抽離出新的類型

這幾類插件如何運行呢？這里簡單介紹下，具體可以參見設計文檔或源碼。

1.UI 插件

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

組件化的方式開發，通過構建工具與代碼配合，支持 JSX 語法

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

2.MSE 插件

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

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

3.其他插件

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

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

我們已經在多個業務中使用 larkplayer，并開發了十幾個插件用于解決各種業務需求，支持了千萬級/天的視頻播放。
larkplayer 及其插件均支持以 script、npm 以及各種模塊化的方式引用，你可以怎么舒服怎么來。

larkplayer 使用方式十分簡單，將以下代碼粘貼到任意編輯器中，用瀏覽器打開即可運行，更詳細的使用文檔可以參考這里。

larkplayer 本身已經包含一些基礎而核心的功能和機制，比如

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

事件上，可以監聽 play、pause、end、error、timeupdate、loadstart、fullscreen 等

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

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

larkplayer-ui 提供了一套適應 PC 與 WAP 的皮膚

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

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

larkplayer-auto-resume 提供自動續播功能

larkplayer-play-muted 提供靜音播放時的 UI

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

larkplayer-ui 插件 能夠自適應 PC 與 WAP 展現以下兩種樣式：

WAP 端樣式

PC 端樣式

值得一提的是，larkplayer-ui 是一種典型的 UI 類插件，這類插件支持 JSX 語法，書寫起來非常方便。比如 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 的這種設計，使得他可能存在大量的插件，每次調用播放器后面都跟著大量的插件引用會導致重復的代碼。這里給出一種解決方案：

1.新建 common/player.js 文件，將 larkplayer 和公用的插件封裝在里面，業務上調用 common/player.js 即可

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

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

export default larkplayer; 

2.對于只在特定場景使用的插件，由于引用次數較少，在對應的場景引用即可

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

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

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

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

UI 插件編寫

MSE 插件編寫

普通插件編寫

采用 karma + jasmine 完成單測編碼編寫&運行
BrowserStack 提供真機環境用于測試回歸

一些示例、思想說明的文檔手動編寫

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

采用 grunt 構建，完成模塊化、打包、壓縮、代碼轉換等工作。

以下是目前整個項目的結構組成

最后，如果你已經看到了這里，不妨到 github 上點個 star 吧，謝謝 :)