写在前面，现在视频业务越来越火爆，玩家也很多。作为一个前端工程师，如何才能打造一个属于自己的播放器？最快最有效的方式就是基于开源播放器的深度定制。至于选择哪个开源播放器，不同的人有不同的看法。你可以参考开源播放器列表(https://www.awesomes.cn/subject/videos)来选择一个适合你的业务的播放器。
我们的玩家选择了排名第一的video.js玩家。截至目前，玩家在Github有13991星，4059叉，可见其受欢迎程度。为了让大家更了解，我们来盘点一下优点:
免费和开源
这意味着什么，我不需要多说。请附上项目地址(https://github . com/video js/video . js)。
兼容主流浏览器
国内的前端开发环境往往需要支持IE浏览器的低级版本。然后随着Flash的退化，很多公司都没有Flash开发工程师了。video.js提供了流畅的Flash播放器，很少能达到UI级别视频的效果，比如全屏。
用户界面定制
开源项目在UI方面再漂亮，也要针对不同特点的业务定制UI。一个方便简单的定制方式尤为重要，更何况还自带编译工具，只能用一个“喜欢”字来形容。如何实现，这里简单介绍一下使用JaScript(es6)构建对象，通过Less编写样式规则，最后借助Grunt进行编译。
柔性插件机制
Video.js提供了插件定义的接口，使得插件开发变得容易。而且社区论坛也提供了一些有用的插件供开发者使用。附加插件列表
一份相对完整的文件
完美的文档对于一个稳定的开源项目非常重要。video.js提供教程、API文档、插件、例子、论坛等等。官方地址
投射热量
开源作者在项目的维护中很活跃，并且能够很快对提出的问题做出反应。开发者在使用过程中出现问题是有一定保障的。
言归正传，如果你想更自如的控制video.js，就必须了解内部原理。本文的目的是通过核心代码演示来解释源代码的运行机制。如果你感兴趣，不要离开，我们马上开始…
组织结构
因为源代码量大，很多同学不知道从哪里入手。先说它的组织架构。
其中，控制条，菜单，弹出，滑块，技术，轨道和实用工具是目录，其他的是文件。Video.js是一个优秀的面向对象模型，所有的ui都是通过JaScript对象来组织和实现的。
Video.js是一个入口文件。请参阅该文件中的源代码。
Setup.js处理播放器的配置和安装，即data-setup属性。
Poster-image.js处理玩家补丁。
Plugins.js实现了插件机制。
Player.js构造了Player类，这也是video.js的核心
Modal-dialog.js处理炸弹层关联。
Media-error.js定义了各种错误描述。如果想了解video.js对各种语言的支持，这个文件是必看的。这是一座桥。
Loading-spinner.js实现了玩家加载的标志。如果你不喜欢默认的加载图标，在这里修改它。
Fullscreen-api.js实现了各浏览器的全屏方案。
Extend.js是节点继承和巴别塔继承的集成。
Event-target.js是事件类和本机事件的兼容处理。
Error-display.js主要处理显示错误的样式设置。
Component.js是video.js框架中最重要的类，是所有类的基类，是组件化的基石。
Close-button.js是关闭按钮的封装，功能比较简单。
Clickable-component.js如果你想实现一个支持点击事件和键盘事件的具有交互功能的组件，可以继承这个类，它帮助你做细节处理。
如果要实现一个按钮，有必要了解一下这个类。
视频未播放时显示big-play-button.js按钮，官方将此按钮放置在播放器左上角。
顾名思义，utils目录是一些常用的函数类和函数。
曲目目录处理音轨和字幕等功能。
Tech directory也是一个非常核心的类，包括对视频封装和flash的支持。
Slider目录主要是UI级可拖动组件的实现，比如进度条、音量条，都是继承自这个类。
弹出目录包含与炸弹层相关的类。
菜单目录包含菜单UI的实现。
控制条目录是非常核心的UI类的集合，播放器下的所有控制器都在这个目录中。
通过对组织架构的描述，你可以，想知道video.js的哪一部分内容可以快速上手。如果你想知道更多关于如何正确使用这些类的知识，请继续阅读关于继承关系的章节。
继承关系
Video.js是JaScript面向对象实现的经典案例。您一定很好奇，页面上一个DOM节点和data-setup属性的简单配置就能生成一个复杂的播放器，但在代码中却看不到对应的HTML“模板”。其实这都是因为“继承”的关系和作者巧妙的构思。
在组织结构一节中提到，所有类的基类都是组件类，基类中有一个createEl方法，就是关联JaScript对象和DOM的方法。也可以重写这个方法，自定义特定类中的DOM内容，然后父类和子类之间的DOM关系也由于JaScript对象的继承关系而组织起来。
为了方便大家查看video.js的所有继承关系，编制了两张图表，一张是完整版，一张是核心版。
详表
芯板材
运行机制
video.js的源代码比较大，需要了解它的运行机制。首先确定它的主线是video.js文件的videojs方法，调用Player.js的Player类，Player继承component.js文件的Component类。最后播放器运行成功。
我们来看看videojs方法的代码，播放器的构造函数，组件的构造函数。通过解释代码，我们可以对整个运行机制有一个基本的了解。注意里面用到的所有方法和其他类对象，仔细阅读组织结构一节就能掌握更多的操作细节。
Videojs方法
播放器的构造器
组件的构造函数
这里通过主线演示基本流程，大纲出来了。请继续阅读了解更多详情。
插件机制
一个完善强大的框架会继承插件运行功能，给更多开发者参与开发的机会，进而实现框架功能的补充和扩展。我们来看看video.js的插件是如何工作的。
插件的定义
如果你之前用过video.js插件或者看过插件源代码，你一定见过videojs.plugin= pluginName这句话。让我们来看看源代码:
不难看出，原理就是把插件(函数)挂载到Player对象的原型上，然后看它是如何执行的。
插件的操作
判断Player的构造函数中是否有插件配置，如果有，通过执行。
UI”继承”的原理
在继承部分提到video.js的所有DOM生成都不是传统的模板方法，而是通过JaScript对象的继承来实现的。
组件基类中有一个createEl方法，可以使用DOM类生成DOM实例。每个UI类都会有一个el属性，这个属性会在实例化时自动生成。源代码在组件的构造函数中:
每个UI类都有一个children属性，用于添加子类。子类可能有子属性，等等。播放器的DOM结构就是通过这样的JaScript对象结构实现的。
Player的构造函数中有代码this . init children()；UI的实例化已开始。该方法在组件基类中定义。让我们来看看:
从这段代码中不难看出，大致意思是通过initChildren获取children属性，然后遍历通过addChild实例化子类。实例化过程会自动重复上述过程，从而达到“继承”的效果。不得不为作者的想法点赞。如果看不出DOM是如何关联的，请继续看addChild方法的源代码:
这段代码的主要思想是提取一个子类的名称，然后获取该类并实例化它。最后，通过最关键的句子。contentel()。在(组件之前插入。el()、ref node)；父类和子类之间的DOM关联完成。相信你对原生DOM操作方法inserBefore很熟悉。
总结
至此，video.js的精髓已经描述完毕。不知道你有没有收获。下面简单总结一下阅读video.js框架源代码的一些经验:
找出播放器的主要流程，这样我们就可以有条不紊的读代码了。
了解框架代码的组织结构，有针对性的学习相关功能的代码。
了解类之间的继承关系，这样在构造插件或者修改源代码的时候就能知道从哪个类继承了。
理解播放器的工作原理有助于实现构建一个新的基于组件的类。
需要了解插件的运行机制，学会自己构造插件。
了解了UI的实现原理，你就知道怎么给播放器添加可视化的东西了。
看我的源码解读，有点帮助，哈哈。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。
