需求分析
因为要迁移视频播放页到新库，所以希望不仅仅是前端自己做代码迁移，希望交互和UI也能有所变化，所以有必要对原有页面做一次大改，其中最重要但就是视频播放器组件，
老的视频播放页用的视频播放插件是video.js，一个兼容flash播放器的开源插件，但是由于整个库的代码比较庞大，加上UI自定义起来略麻烦，也无需兼容Flash播放器，还有诸如使用方式以及后续维护的一些难处。
所以会自己重新写一个视频播放组件。
组件设计
一个web视频播放器组件，由播放器组件和底部控制栏组成。
根据产品需求，控制栏要支持以下几个功能。
播放和暂停功能
显示播放进度条
显示缓冲进度条
选择播放进度（seek)
静音按钮
显示音量大小
选择音量大小
视频清晰度选择功能
全屏功能
以上功能有的在原生浏览器视频播放器的控制栏中已经实现,比如播放和暂停，进度条和音量显示等，有的还需要自己模拟。
当然浏览器原生的播放控件在不同播放器上是不一致的，也无法进行css上的修改。
所以一般做法是自己操作dom模拟控制条，然后美化样式并且进行一些事件绑定将浏览器原生视频播放事件。
使得在所有浏览器上保持样式与功能上的一致，像video.js就是这么做的，主要原因是为了兼容老版本的IE浏览器。
但是由于主站只需要兼容IE11以上，所以这些功能模块可以直接利用浏览器原生元素，无需自己另写一些多余的功能。
所以对于以上功能，我们可以选择的元素dom元素有哪些？
按钮可以直接使用Button 元素 和 a 元素
进度条相关的可以使用progress 和 input（type='range') 元素
所以在UI层面，要做的就是使用css美化这些元素dom。
input 和 progress元素在不同浏览器上的显示如下:
-
chrome
chrome -
edge
edge -
Ie11
ie11
对于input 元素的 的样式修改，我们可以用
// WebKit
::-webkit-slider-runnable-track
::-webkit-slider-thumb
// Mozilla
::-moz-range-track
::-moz-range-thumb
// Microsoft
::-ms-track
::-ms-fill-upper
::-ms-fill-lower
::-ms-thumb
::-ms-tooltip
修改样式
对于progress元素的样式修改，我们可以用
::-webkit-progress-value
::-moz-progress-bar
::-ms-fill
参考张鑫旭大神的HTML5 progress元素的样式控制、兼容与实例。
然后就是对于视频本身的一些事件的处理了。
