我们的播放器选择了排名第一的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的实现事理，就知道自己如何为播放器添加视觉层面的东西了
看看我的源码解读吧，能帮一点是一点，哈哈
