V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
masahiro
V2EX  ›  开源软件

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

  •  
  •   masahiro · 2018-12-29 18:51:41 +08:00 · 3459 次点击
    这是一个创建于 2143 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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 !

    12 条回复    2018-12-30 11:42:36 +08:00
    whileFalse
        1
    whileFalse  
       2018-12-29 21:25:14 +08:00
    虽然不知道是什么,不过听起来像是大佬的样子
    loading
        2
    loading  
       2018-12-29 21:37:33 +08:00 via Android
    哦,和我点进来期望的“播放器”是两码事……打扰了。
    ayase252
        3
    ayase252  
       2018-12-29 21:43:57 +08:00 via iPhone
    沙雕 dom 还行,学到了
    masahiro
        4
    masahiro  
    OP
       2018-12-29 22:06:44 +08:00
    @loading 你是不是点错了……
    vanishcode
        5
    vanishcode  
       2018-12-29 22:33:05 +08:00 via Android
    我做过一个 kilikili。。。
    cbais7890
        6
    cbais7890  
       2018-12-29 22:53:47 +08:00
    沙雕 dom 再一次更新了我的知识库
    Pastsong
        7
    Pastsong  
       2018-12-29 22:55:31 +08:00
    不是 CCTV 啊
    agdhole
        8
    agdhole  
       2018-12-29 22:59:45 +08:00 via Android
    听到下一代以为是 fly.js 的进化体
    masahiro
        9
    masahiro  
    OP
       2018-12-29 23:02:33 +08:00
    @agdhole flv.js 是转码库,不是播放器(⊙o⊙)…
    masahiro
        10
    masahiro  
    OP
       2018-12-29 23:56:45 +08:00 via iPhone
    @Pastsong 你猜
    echisan
        11
    echisan  
       2018-12-30 11:36:45 +08:00 via iPhone
    c 站不是 cctv 吗……
    masahiro
        12
    masahiro  
    OP
       2018-12-30 11:42:36 +08:00 via Android
    @echisan 很明显你 c 并非我 c
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2515 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 15:50 · PVG 23:50 · LAX 07:50 · JFK 10:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.