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,看着就刺激::>_<::
我尽可能的夸夸它,好处::>_<::
特别适合播放器这种场景,就是我用 沙雕 dom 隔离了,外部的 css 就不会干扰了
这就保证了 ep 接入到任何网站,样式都不会有影响√
但是除了这个好处,scoped css 真实超级万年大坑,待会儿再说
沙雕 dom 的好处就是,它不感染 主 dom tree,也就是说你在沙雕里操作 dom,把沙雕操作死了,主 dom tree 也可以继续喝茶::>_<::
以上,好像就这点好处了,对于播放器而言,不得不说,是绝配
但是还是遇到了很多大坑,我们一个一个的来
没错,超级大坑,直接剥夺了 css 复用的能力
这意味着,reset 没用了,定制主题啥的也没用了
好在,我还是找到了多种“穿透”方法
目前,已知可以穿透 scoped css 的方法:
感谢我吧::><::别地儿肯定没有::><::他们早就认命了::>_<::
虽然都不常用……
具体怎么使用,可以看 eplayer 的使用方法哈,因为它各种骚操作都用上了
你会发现,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 吗……
|