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小时内与您取得联系。

整合营销服务商