eplayer 1.0 釋出，面向未來，擁抱 web-components

132發表於2018-12-28
Web

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

之前還說寫完 fre 寫 smox 2.0 來著，然而我們網站的小夥伴實在是忍不了播放器的 bug 了

催著我給播放器修 bug

因為當時寫 ep 的時候，正值 c 站初期糊屎階段，程式碼質量堪憂，我實在是也懶得修了，打算直接重寫

重寫總得有個理由什麼的::>_<::比如研究個新特性什麼的……

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

截圖和演示

eplayer 1.0 釋出，面向未來，擁抱 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 嘛，該有的都有√

eplayer 1.0 釋出，面向未來，擁抱 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！

相關文章