halo，大家好，我又来了::>_<::

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

催着我给播放器修 bug

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

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

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

截图和演示

感受下，颜值……顺带演示地址： https://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 地址： https://github.com/132yse/eplayer

官网地址： https://eplayer.js.org

C 站地址： https://www.clicli.us

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

[c 站开源] eplayer 发布 1.0：面向未来的下一代视频播放器

截图和演示

使用

好处

坑

scoped css

face-font

浏览器兼容

总结