larkplayer是一款轻量级&易扩充的html5播放器，是为解决一些中大型的视频业务场景。那些业务不一定须要大而全的解决方案，但是她们常常有自己的多样化需求。
背景
为何要编撰larkplayer？（注意，这儿面有一些我的个人观点）
目前html5webplayer社区早已比较成熟，videojs和jwplayer等都是优秀的解决方案。但是，社区的两极分化也比较严重：
因而，对于一些中大型的视频业务场景，虽然并没有一个舒服的播放器方案可供选择。
思索
怎么解决原告问题？
业务上：
代码上：
设计
larkplayer的灵感来自videojs，采用插件化的设计：播放器本身只是一个精美的核心，包含一些必备的机制和API，其余功能由插件提供。
你可以自由选择和编撰自己的插件，做到按需取用，渐进提高。在ugilfy+gzip后，larkplayer代码容积约12KB.
1.内部模块及说明
2.API3.风波机制
风波作为播放器内部核心的沟通机制，为内部的状态流转以及后续的扩充提供底层支持。
目前自定义风波系统的实现方法主要有2种：
因为DOMEvent才能窃听DOM相关风波，同时冒泡机制对后续UI插件的控制有一定的帮助，为此选用其作为自定义风波系统实现的基础。
通过DOMEvent实现以下几类主要功能：
DOMEvent流程可通过右图概览：
4.插件机制
插件是一种常用的『依赖反转』的形式，致使播放器毋须依赖外部或上层组件，而是所有外部插件都依赖播放器本身。
同时各插件因为是面向的播放器插口，插件A不晓得插件B的存在，因而能极大地增加各插件（功能）间的耦合。
怎样设计插件的类型和插口便关系到后续常年的发展，经过业务经验的总结以及对其他解决方案的参考，总结出以下3类插件类型：
这几类插件怎样运行呢？这儿简单介绍下，具体可以参见设计文档或源码。
1.UI插件
2.MSE插件
3.其他插件
实践
我们早已在多个业务中使用larkplayer，并开发了十几个插件用于解决各类业务需求，支持了千万级/天的视频播放。
larkplayer及其插件均支持以script、npm以及各类模块化的形式引用，你可以如何舒服如何来。
基本使用
larkplayer使用方法非常简单，将以下代码粘贴到任意编辑器中，用浏览器打开即可运行，更详尽的使用文档可以参考这儿。
larkplayer quick start
larkplayer本身早已包含一些基础而核心的功能和机制，例如
更多的功能和风波可以查看API。
使用插件
另外有一些常用但可能不是必须的功能，例如自定义款式、m3u8文件播放、断点续播等，我们早已提供了一些插件：
插件的使用也非常简单，只需在larkplayer以后引入插件即可。
下边的代码为播放器添加了自定义的款式以及断点续播功能，将其粘贴到任意编辑器，用浏览器打开即可运行。
larkplayer plugin exmaple
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类插件的编撰示例：
其他测试
采用karma+jasmine完成单测编码编撰&运行
BrowserStack提供真机环境用于测试回归
文档建立
采用grunt建立，完成模块化、打包、压缩、代码转换等工作。
总览
以下是目前整个项目的结构组成
最后，假如你早已听到了这儿，不妨到github上点个star吧，感谢:)
