这是一个创建于 2160 天前的主题，其中的信息可能已经有所发展或是发生改变。
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 ！
 |
1
whileFalse 2018-12-29 21:25:14 +08:00
虽然不知道是什么，不过听起来像是大佬的样子
|
 |
2
loading 2018-12-29 21:37:33 +08:00 via Android
哦，和我点进来期望的“播放器”是两码事……打扰了。
|
 |
3
ayase252 2018-12-29 21:43:57 +08:00 via iPhone
沙雕 dom 还行，学到了
|
 |
5
vanishcode 2018-12-29 22:33:05 +08:00 via Android
我做过一个 kilikili。。。
|
 |
6
cbais7890 2018-12-29 22:53:47 +08:00
沙雕 dom 再一次更新了我的知识库
|
 |
7
Pastsong 2018-12-29 22:55:31 +08:00
不是 CCTV 啊
|
 |
8
agdhole 2018-12-29 22:59:45 +08:00 via Android
听到下一代以为是 fly.js 的进化体
|
 |
11
echisan 2018-12-30 11:36:45 +08:00 via iPhone
c 站不是 cctv 吗……
|
Select Language