使用 web-components 重构 eplayer

[yisar]

eplayer 当前版本，写的非常仓促，代码质量堪忧
还伴随着 bug

bug 有两种：

1. 事件冒泡问题。由于播放器纯操作 dom，然后最初设计的时候 dom 结构设计不理想，导致父子事件冒泡问题、click 事件和 mouse 事件的冒泡问题
2. 移动端兼容问题，当初为了尽可能兼顾移动端的各种奇葩浏览器，甚至独创了 h5 横屏播放::>_<::
   现在想想，有点傻

解决方案

web-components
大家都知道 web-components 有个很骚的特性就是 shadow dom 和 scoped css

在一般项目里，它并不好用，直接剥夺了 css 复用的能力（如 reset 就没法用）

但是播放器的场景不一样，看图

这个播放框是独立的，甚至很多做法都是通过 iframe，这个独立的播放器可以接入网站任何地方，并且不希望 css 收到外部污染
这样想来，web-components 简直绝配

这样一来，我可以只关注这个 shadow dom 中的 dom 和 css 了

放弃移动端

移动端直接放弃，使用默认的播放器，供各种国产浏览器替换 ui
包括小程序，也直接使用默认播放器，这不是一种妥协，而是更好的兼容::>_<::因为只有默认播放器，是所有移动浏览器完美支持的

这里还有个问题，就是如何判断是否移动端，因为 ssr 环境得不到 ua，所以……得另想他法

bug 收集：#3

[yisar]

重构完成，下一步：

1. 移动端兼容
2. 弹幕
3. 格式兼容

[yisar]

以上，全部重构完成。关issue，期待下次重构