eplayer 1.0 发布，面向将来，拥抱 web-components

halo，你们好，我又来了::>_<::

以前还说写完 fre 写 smox 2.0 来着，然而咱们网站的小伙伴实在是忍不了播放器的 bug 了

催着我给播放器修 bug

由于当时写 ep 的时候，正值 c 站初期糊屎阶段，代码质量堪忧，我实在是也懒得修了，打算直接重写

重写总得有个理由什么的::>_<::好比研究个新特性什么的……

web-components 很不幸，被我看上了::>_<::

截图和演示

感觉下，颜值……顺带演示地址：eplayer.js.org/

使用

dom，这是一个 web-components 组件

<e-player src="./001.mp4"></e-player>
复制代码

css，可选，用于穿透 shadow-dom 预留的默认样式，默认为蓝色

e-player {
  /* 进度条底色 */
  --progress:rgba(255,255,255,.3);
  /* 进度条偏移颜色 */
  --buffer:#f2e;
  /* 按钮颜色 */
  --dot:#f2e;
  /* 图标颜色 */
  --icons:#fff
}
复制代码

以上，是否是很惊艳，有种原生的逼格！毕竟基于 web-components 嘛，该有的都有√

好比 沙雕 dom，看着就刺激::>_<::

好处

我尽量的夸夸它，好处::>_<::

• scoped css

特别适合播放器这种场景，就是我用 沙雕 dom 隔离了，外部的 css 就不会干扰了

这就保证了 ep 接入到任何网站，样式都不会有影响√

可是除了这个好处，scoped css 真实超级万年大坑，待会儿再说

• shadow-dom

沙雕 dom 的好处就是，它不感染 主 dom tree，也就是说你在沙雕里操做 dom，把沙雕操做死了，主 dom tree 也能够继续喝茶::>_<::

以上，好像就这点好处了，对于播放器而言，不得不说，是绝配

可是仍是遇到了不少大坑，咱们一个一个的来

坑

scoped css

没错，超级大坑，直接剥夺了 css 复用的能力

这意味着，reset 没用了，定制主题啥的也没用了

好在，我仍是找到了多种“穿透”方法

目前，已知能够穿透 scoped css 的方法：

• customCss
• @import
• 拼接字符串
• js 操做 dom

感谢我吧::><::别地儿确定没有::><::他们早就认命了::>_<::

虽然都不经常使用……

具体怎么使用，能够看 eplayer 的使用方法哈，由于它各类骚操做都用上了

face-font

你会发现，font-face 在沙雕 dom 里是无效的，我也找到了解决方法

就是，font-face 放全局，font-class 放沙雕

而后 css 必定要后置，什么是后置，就是……操做 dom 算后置，@import 也是后置

这个不用担忧，eplayer 这块是没问题的，icon 也是很是好看的

浏览器兼容

很不幸啊！这兼容超级很差啊！

什么国产浏览器，搜狗啊啥的都不支持 沙雕 dom 的渲染啊啊啊啊

就这么瞧不起沙雕的嘛::>_<::

有的也支持渲染，可是会出现一些 api 的问题，这个好型，我当 bug 修……

一言难尽啊::>_<::只求你们都来玩沙雕，玩的人多了，兼容也就行了

总结

谢谢你们阅读哈！eplayer 做为 c站的播放器，后续会继续更新的安心西路！

最后附上 github 地址：github.com/132yse/epla…

官网地址：eplayer.js.org/

C 站地址：www.clicli.top

(⊙o⊙)…广告三连，欢迎试用与 star！