H5播放器源碼解讀 (video.js)

在前面

現在視頻業務越來越流行了，播放器也比較多，作為前端工程師如何打造一個屬于自己的播放器呢？最快最有效的方式是基于開源播放器深度定制，至于選擇哪個開源播放器仁者見仁智者見智，可以參考開源播放器列表(https://www.awesomes.cn/subject/videos)選擇適合自己業務的播放器。

我們的播放器選擇了排名第一的video.js播放器，截至目前該播放器在Github擁有13,991 star, 4,059 fork，流行程度可見一斑。為了讓大家更多的了解它，我們細數下優點：

免費開源
這個意味著什么就不多說了，附上項目地址(https://github.com/videojs/video.js)
兼容主流瀏覽器
在國內的前端開發環境往往需要支持到低級版本的IE瀏覽器，然后隨著Flash的退化，很多公司沒有配備Flash開發工程師，video.js提供了流暢的Flash播放器，而且在UI層面做到了和video的效果，實屬難得，比如全屏。
UI自定義
不管開源項目在UI方面做的如何漂亮，對于各具特色的業務來說都要自定義UI，一個方便簡單的自定義方式顯得格外重要，更何況它還自帶了編譯工具，只能用一個”贊“字形容。具體怎么實現的，這里先簡單描述下是使用JavaScript（es6）構建對象，通過Less編寫樣式規則，最后借助Grunt編譯。
靈活插件機制
video.js提供一個插件定義的接口，使插件開發簡單易行。而且社區論壇也提供了一些好用的插件供開發者使用。附插件列表
比較完善的文檔
完善的文檔對于一個穩定的開源項目是多么的重要，video.js提供了教程、API文檔、插件、示例、論壇等。官方地址
項目熱度
開源作者對項目的維護比較積極，提出的問題也能很快給予響應。開發者在使用過程中出現問題算是有一定保障。

書歸正傳，要想更自由的駕馭video.js，必然要了解內部原理。本文的宗旨就是通過核心代碼演示講解源碼運行機制，如果有興趣，不要離開，我們馬上開始了……

組織結構

由于源碼量較大，很多同學不知道從何入手，我們先來說下它的組織結構。

其中control-bar，menu，popup，slider，tech，tracks，utils是目錄，其他是文件。video.js是個非常優秀的面向對象的典型，所有的UI都是通過JavaScript對象組織實現的。

video.js是個入口文件，看源碼可以從這個文件開始。

setup.js處理播放器的配置安裝即data-setup屬性。

poster-image.js處理播放器貼片。

plugins.js實現了插件機制。

player.js構造了播放器類也是video.js的核心。

modal-dialog.js處理彈層相關。

media-error.js定義了各種錯誤描述，如果想理解video.js對各語言的支持，這個文件是必看的，它是橋梁。

loading-spinner.js實現了播放器加載的標志，如果不喜歡默認加載圖標在這里修改吧。

fullscreen-api.js實現各個瀏覽器的全屏方案。

extend.js是對node 繼承 and babel's 繼承的整合。

event-target.js 是event類和原生事件的兼容處理。

error-display.js 主要處理展示錯誤的樣式設置。

component.js 是video.js框架中最重要的類，是所有類的基類，也是實現組件化的基石。

close-button.js 是對關閉按鈕的封裝，功能比較單一。

clickable-component.js 如果想實現一個支持點擊事件和鍵盤事件具備交互功能的組件可以繼承該類，它幫你做了細致的處理。

button.js 如果想實現一個按鈕了解下這個類是必要的。

big-play-button.js 這個按鈕是視頻還未播放時顯示的按鈕，官方將此按鈕放置在播放器左上角。

utils目錄顧名思義是一些常用的功能性類和函數。

tracks目錄處理的是音軌、字幕之類的功能。

tech目錄也是非常核心的類，包括對video封裝、flash的支持。

slider目錄主要是UI層面可拖動組件的實現，如進度條，音量條都是繼承的此類。

popup目錄包含了對彈層相關的類。

menu目錄包含了對菜單UI的實現。

control-bar目錄是非常核心的UI類的集合了，播放器下方的控制器都在此目錄中。

通過對組織結構的描述，大家可以，想了解video.js的哪一部分內容可以快速入手。如果還想更深入的了解如何正確使用這些類，請繼續閱讀繼承關系一節。

繼承關系

video.js是JavaScript面向對象實現很經典的案例，你一定會好奇在頁面上一個DOM節點加上data-setup屬性簡單配置就能生成一個復雜的播放器，然而在代碼中看不到對應的HTML”模板“。其實這都要歸功于”繼承“關系以及作者巧妙的構思。

在組織結構一節有提到，所有類的基類都是Component類，在基類中有個createEl方法這個就是JavaScript對象和DOM進行關聯的方法。在具體的類中也可以重寫該方法自定義DOM內容，然后父類和子類的DOM關系也因JavaScript對象的繼承關系被組織起來。

為了方便大家查閱video.js所有的繼承關系，整理了兩個圖表，一個是完整版，一個是核心版。

完整版

核心板

運行機制

video.js源碼代碼量比較大，我們要了解它的運行機制，首先確定它的主線是video.js文件的videojs方法，videojs方法調用player.js的Player類，Player繼承component.js文件的Component類，最后播放器成功運行。

我們來看下videojs方法的代碼、Player的構造函數、Component的構造函數，通過對代碼的講解基本整個運行機制就有了基本的了解，注意里面用到的所有方法和其他類對象參照組織結構一節細細閱讀就可以掌握更多的運行細節。

videojs方法

Player的構造函數

Component的構造函數

這里通過主線把基本的流程演示一下，輪廓出來了，更多細節還請繼續閱讀。

插件機制

一個完善和強大的框架都會繼承插件運行功能，給更多的開發者參與開發的機會進而實現框架功能的補充和延伸。我們來看下video.js的插件是如何運作的。

插件的定義

如果之前用過video.js插件的同學或者看過插件源碼，一定有看到有這句話videojs.plugin= pluginName，我們來看下源碼：

不難看出，原理就是將插件（函數）掛載到Player對象的原型上，接下來看下是怎么執行的。

插件的運行

在Player的構造函數里判斷是否有插件這個配置，如果有則遍歷執行。

UI"繼承"的原理

在繼承關系一節中有提到video.js的所有DOM生成都不是采用的傳統模板的方式，都是通過JavaScript對象的繼承關系來實現的。

在Component基類中有個createEl方法，在這里可以使用DOM類生成DOM實例。每個UI類都會有一個el屬性，會在實例化的時候自動生成，源代碼在Component的構造函數中：

每個UI類有一個children屬性，用于添加子類，子類有可能扔具有children屬性，以此類推，播放器的DOM結構就是通過這樣的JavaScript對象結構實現的。

在Player的構造函數里有一句代碼this.initChildren();啟動了UI的實例化。這個方法是在Component基類中定義的，我們來看下：

通過這段代碼不難看出大概的意思是通過initChildren獲取children屬性，然后遍歷通過addChild將子類實例化，實例化的過程會自動重復上述過程從而達到了”繼承“的效果。不得不為作者的構思點贊。如果你要問并沒看到DOM是怎么關聯起來的，請繼續看addChild方法的源碼：

這段代碼的大意就是提取子類的名稱，然后獲取類并實例化，最后通過最關鍵的一句話this.contentEl().insertBefore(component.el(), refNode);完成了父類和子類的DOM關聯。相信inserBefore大家并不陌生吧，原生的DOM操作方法。

總結

至此，video.js的精華部分都描述完了，不知道大家是否有收獲。這里簡單的總結一些閱讀video.js框架源碼的心得：

找準播放器實現的主線流程，方便我們有條理的閱讀代碼
了解框架代碼的組織結構，有的放矢的研究相關功能的代碼
理解類與類的繼承關系，方便自己構造插件或者修改源碼的時候知道從哪個類繼承
理解播放器的運行原理，有利于基于Component構造一個新類的實現
理解插件的運行機制，學會自己構造插件還是有必要的
理解UI的實現原理，就知道自己如何為播放器添加視覺層面的東西了
看看我的源碼解讀吧，能幫一點是一點，哈哈

1272208556@qq.com

1、HTML + CSS + UI

2、Javascript

3、HTML5CORE + AJAX + Jquery

4、Bootstrap,Angular JS + 其他框架

1、HTML + CSS3BASIC + PRO + UI + PRO + CSS3CORE + PRO

======================================================

1、Internet

1、什么是Internet

是全球性計算機互聯網絡,是由若干終端(PC,移動端)以及特殊的傳輸介質而組成的一個網絡結構

PC:Personal Computer

2、提供的服務

信息共享

Telnet : 遠程連接

Email : 電子郵件

WWW : 萬維網 www.baidu.com

BBS : 電子公告板，論壇

FTP : 上傳和下載服務

3、實現技術

1、分組交換原理:數據通過數據包進行傳遞，到達目的地后，對數據包進行重組

2、TCP/IP 協議簇

2、WEB

1、什么是WEB

就是 WWW（World Wide Web）

w3c : www consortium 萬維網聯盟

2、能干什么

能夠將各類的信息和服務進行連接，提供圖形用戶界面

信息:文字、圖片、音頻、視頻

服務:Telnet, FTP , Mail , HTTP ...

3、萬維網就是無數的文檔集合（網頁文檔）,文檔會駐留在世界（互聯網）的任何一個角落

3、WEB的工作原理

WEB是基于Internet的多媒體信息服務系統

1、基于瀏覽器 / 服務器模式

B / S : Browser / Server

在服務器上，主要以網頁的形式發布多媒體信息

2、由WEB服務器、瀏覽器、通信協議組成

3、WEB 相關技術

1、服務器端技術（后臺）

PHP,JSP,ASP 。。。。。。

2、客戶端技術(前端技術)

HTML,

CSS,

Javascript

=========================================================

1、HTML 入門

1、什么是HTML

HTML(Hyper Text Markup Language),超級文本標記語言

超文本:

標記 : 超文本都是由標記組成的

<a>

語言 : 包含自己獨特的語法

HTML最終由瀏覽器負責解釋

HTML總可以嵌入一些腳本語言編寫的程序段:Javascript,VBScript

2、HTML版本

超級文本標記語言（第一版）

HTML2.0

HTML3.2

HTML4.0

HTML4.01

XHTML1.0

HTML5

3、標簽(標記)

1、標簽語法

1、必須使用尖括號擴起來

<a>,<div> ...

<A>,<a>

2、有封閉類型的標簽，也有非封閉類型的標簽

1、封閉類型

也稱作雙標記，則必須成對出現

<標記>文本內容</標記>

不同的標記，決定了"文本內容"的不同表現形式

eg:<a></a>,<p></p>,<div></div>

2、非封閉類型

也稱作單標記、空標記

<標記>

或者

<標記/>

eg:

3、元素

標記就是元素，元素也稱為標記

4、元素嵌套(標簽嵌套)

標簽之間相互嵌套，形成復雜的語法結構

<body>

<p>

<a></a>

</p>

</body>

5、屬性

屬性是出現在開始標記中的內容,作用是修飾元素

標準屬性:每個元素都會具備的通用屬性

id : 定義每個標簽的唯一標識

title:提示文本

class:樣式相關，類樣式

style:樣式相關，行內樣式

操作1：定義一對p標簽，id屬性設置為program

多屬性:

注意：多屬性之間，排名不分先后

2、創建HTML文檔

開發工具:任何一個文字編輯軟件都可以開發HTML

EditPlus ：超級記事本

運行環境:任何一個瀏覽器都能運行HTML

Google Chrome,Mozilla Firefox,Microsoft IE,Safari,Opera

超文本文件(HTML文檔):

是一個以.html或.htm結尾的文檔

3、文檔結構

1、文檔類型聲明

聲明使用的html版本和風格

<!doctype html>

2、html頁面

1、文檔根元素

每個文檔有且僅有一對根元素 , html

2、在根元素的內部，包含兩對子元素

1、head : 頁面的頭部內容

定義頁面全局信息

包含:

<title></title> : 網頁標題

2、body : 頁面的主體內容

任何一個標簽，都可能會出現在body中

3、head元素

1、聲明網頁標題

2、定義網頁文本編碼格式

默認:ISO-8859-1,只支持英文以及英文狀態下的標點符號

utf-8:支持中英文,標點符號

3、... ...

4、body元素

屬性:

text : 文本的顏色

bgcolor : 背景顏色

練習1:

1、為body添加兩個屬性，text，bgcolor

2、文本顏色 : 紅色(red)

背景顏色 : 銀色(silver)

3、在body中隨意寫上一段文本，觀察頁面顯示效果

5、文本標記

1、特殊的文本

轉義字符:

空格: 

< : < less than

> : > greater than

版權標識:©

2、文本標記

1、文本樣式

<b>...</b> : 加粗文本

<i>...</i> : 斜體文本

<u>...</u> : 下劃線

<s>...</s> : 刪除線

<sup>...</sup> : 上標

<sub>...</sub> : 下標

2、標題元素

1-6級6個標題

<hn></hn> n:1-6

一級最大

六級最小

3、段落元素

提供了結構化文本的表現方式

語法:<p></p>

注意：

1、每對p標簽單獨成一個段落

2、段落與其他元素有垂直空白，段落間距

常用屬性:

align : 水平對齊方式

取值:left center right

4、換行元素

在代碼的任何位置處，實現回車的效果

<br />

5、水平線

又叫分割線

<hr />

屬性:

1、size : 水平線的粗細，通常以像素(px)為單位

2、width: 寬度

3、align: 水平線的水平對齊方式

4、color: 顏色

6、分區元素

目的：為元素進行分組，多數用在布局中

塊分區元素:<div></div> 層

行內分區元素:<span></span>

注意：

div ：主要用在布局上

span：修改其內部內容的樣式

7、預格式化

保留源文檔中的空格和回車

<pre>

文本內容

</pre>

3、注釋

可以寫在html源碼中，但不被瀏覽器解釋的文本

語法:

4、行內元素與塊級元素

塊級元素:默認情況下，塊級元素獨占一行，元素的前后都會自動換行 div,hn,hr,p

塊級元素作用:布局

行內元素:默認情況，多個元素位于同一行，不會換行

span,文本標記... ...

行內元素作用:修改內部內容的樣式

文：https://mp.weixin.qq.com/s/yUoVBTmdMt8knxlRn2mGVA

1 科學的上網

學習前端過程中，最基本和經常的操作就是：搜索和檢查。

1.1 搜索

1.1.1 工具：Chrome 瀏覽器

官網、或百度搜索安裝。

1.1.2 讓 Chrome 瀏覽器可以登錄國外網站（特別重要的一步）

1.2 檢查

后邊無論學 HTML、CSS、JS 還是 Ajax 等，這個檢查的動作都是最經常用到的動作。

1. 在瀏覽器中的任何網頁上，鼠標右鍵，然后彈出的選項中選擇“檢查”；

2. 會出現我們本頁面的相關代碼——DOM 樹（Document Object Model 文檔對象模型）；

我們通過 JS 操作頁面的元素，進行添加、移動、改變或移除的方法和屬性，都是 DOM 提供的。

3. 通過點擊代碼框左上角圖標，可以實時查看網頁內任意模塊對應的代碼（鼠標放在任意地方，代碼框里就會顯示與之對應的代碼）；

4. 按建盤上 Esc 鍵，或直接點擊代碼框的 Console，就可以打開 Console ；

作用：用于調試 JS 的；
比如：有一個樣式沒有出來，那么代碼框與之對應的代碼會報錯，可以讓我們知道錯在哪里。

2 Git 的安裝

Git 中文使用文檔——作為參考手冊，需要時翻翻（https://git-scm.com/book/zh/v2）

2.1 安裝方式

谷歌搜索安裝（點擊 DOWNLOAD 后，直接下一步）——注：macOS 系統在安裝了 Xcode 后會自帶 Git 。

2.2 注意事項

針對 windows 用戶，Git 最好直接安裝在 C 盤。因為 windows下這些軟件總會出現些莫名的小問題，直接安裝在 C 盤會支持的相對好一些。

2.3 安裝完成

安裝完成后，里邊會相應附帶有 Git Bash 。可以打開 Git Bash 客戶端（蘋果電腦用戶打開自有終端），初次使用需要輸入相關命令行（先照做，后邊文章會具體談到）：

git config --global user.name xxx →方便產品經理找你（xxx 是輸入我們自己的用戶名）
git config --global user.email yyy →方便產品經理找你（yyy 是輸入你的郵箱）
git config --global push.default simple
git config --global core.quotepath false →防止文件名變成數字
git config --global core.editor "vim" →使用 vim 編輯提交信息

2.4 外觀設置

（針對 windows 用戶）設置一下 Git Bash 客戶端的外觀。

2.4.1 將操作界面設置成透明，方便操作、觀察變化

2.4.2 將界面滾動條設置在右側

2.4.3 設置編碼方式

3 Node.js安裝

3.1 安裝方式

谷歌搜索安裝（點擊 DOWNLOAD 后，直接下一步）；

3.2 注意事項

針對 windows 用戶，Node.js 最好直接安裝在 C 盤。因為 windows 下這些軟件總會出現些莫名的小問題，直接安裝在 C 盤會支持的相對好一些。

3.3 安裝完成

裝了 Node.js 之后我們就可以在 Git Bash 里面使用 node 和 npm 這兩個命令了（下載安裝 Node.js 后，其附帶了 npm），打開 Git Bash 試試看：

3.3.1 查看 node 和 npm 在電腦的哪個位置

which node
which npm

3.3.2 查看 node 和 npm 的版本號

node -v
npm -v
或
node --version
npm --version

3.3.3 試著用 npm 做一個命令行的翻譯工具（這個小工具的名字叫做 fanyi）

npm i -g fanyi

3.3.4 加載完成后，輸入

fanyi hello

相關中文解釋就會出來，還會給你發音。

??注意：

如果遇到以下“權限問題”：

請如下操作：（參考：處理 npm 權限問題——https://www.kancloud.cn/shellway/npm-doc/199985）

3.3.5 試著用 node 做個算數

node

回車后便進入了 node 運行環境，這時候我們就可以用 node 寫 JS 了：

1+2

4 編輯器的安裝

4.1 安裝方式

谷歌搜索安裝（點擊 DOWNLOAD 后，直接下一步）。

4.2 編輯器的選擇

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商