eplayer 1.0 發佈，面向將來，擁抱 web-components

halo，你們好，我又來了::>_<::

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

催着我給播放器修 bug

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

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

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 嘛，該有的都有√

好比 沙雕 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！