多种情况下判断两个参数是否等价（一回事）的方法

需求分析

因为要迁移视频播放页到新库，所以希望不仅仅是前端自己做代码迁移，希望交互和UI也能有所变化，所以有必要对原有页面做一次大改，其中最重要但就是视频播放器组件，

老的视频播放页用的视频播放插件是video.js，一个兼容flash播放器的开源插件，但是由于整个库的代码比较庞大，加上UI自定义起来略麻烦，也无需兼容Flash播放器，还有诸如使用方式以及后续维护的一些难处。

所以会自己重新写一个视频播放组件。

组件设计

一个web视频播放器组件，由播放器组件和底部控制栏组成。

根据产品需求，控制栏要支持以下几个功能。

1. 播放和暂停功能

2. 显示播放进度条

3. 显示缓冲进度条

4. 选择播放进度（seek)

5. 静音按钮

6. 显示音量大小

7. 选择音量大小

8. 视频清晰度选择功能

9. 全屏功能

以上功能有的在原生浏览器视频播放器的控制栏中已经实现,比如播放和暂停，进度条和音量显示等，有的还需要自己模拟。

当然浏览器原生的播放控件在不同播放器上是不一致的，也无法进行css上的修改。

所以一般做法是自己操作dom模拟控制条，然后美化样式并且进行一些事件绑定将浏览器原生视频播放事件。

使得在所有浏览器上保持样式与功能上的一致，像video.js就是这么做的，主要原因是为了兼容老版本的IE浏览器。

但是由于主站只需要兼容IE11以上，所以这些功能模块可以直接利用浏览器原生元素，无需自己另写一些多余的功能。

所以对于以上功能，我们可以选择的元素dom元素有哪些？

1. 按钮可以直接使用Button 元素 和 a 元素

2. 进度条相关的可以使用progress 和 input（type='range') 元素

所以在UI层面，要做的就是使用css美化这些元素dom。

input 和 progress元素在不同浏览器上的显示如下:

1. chrome

   
   
   

   chrome

2. edge

   
   
   

   edge

3. 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元素的样式控制、兼容与实例。

然后就是对于视频本身的一些事件的处理了。