我的新轮子：eplayer，小而美的视频播放器-CSDN博客

halo，大家好，我是yse，好久不见啦！嗯……闲着没事儿再来发个文（guang）章（gao）

起因

应该有不少人知道，我今年暑假写了新网站（clicli.us），不再是里番网站，而是一家【视频网站】

作为一家视频网站，是需要视频播放器来播放视频的，我寻找了很久靠谱的视频播放器，然后没找到

这里面有如 dplayer 这种大而全的，也有 ckplayer 这种 flash 的，还有不大不 flash 但是长得丑的，这都不是我需要的，我需要的是：能接入现代框架、轻量级（5kb-）、纯 html5 、高颜值（统一）

所以最终，自己动手，丰衣足食~

然后我就写了 eplayer，ep 也正好是番剧的缩写，也算是巧合吧

使用

<div id=player></div>
复制代码

import Eplayer from 'eplayer'

const el = document.getElementById('player')
const ep = new Eplaer(this.$refs.player, {
    src: '001.m9u8',
    hls: true,
    themeColor: '#000' //必传，强制统一UI配色
})
复制代码

然后

写 eplayer 的时候，无疑最终就是本着上面提到的 feature 来写下面具体来说说 eplaeyr 的一些方面的解决方案：

接入现代框架

在接入现代框架之前，要知道现代框架到底和普通的 js 引用有什么不一样

现代框架有自有的生命周期和钩子

比如某个场景，当页面销毁时，记录播放位置，然后存入 localstorage ，下次读出来。这个功能在视频播放场景中很常见平时我们可能直接监听页面卸载了。

但是现代框架中只有组件，没有页面，比如 vue ，我们需要 beforeDestroy，react 需要 ComponentDidUnmount

ep 后面会对应不同框架，暴露不同的 api 或者，直接会发布两个组件

轻量级

ep 很小，gzip 1kb，这对比 dplayer 的接近 30 kb，毕竟面向现代框架的 spa，肯定是越小越好

纯 html5

ep 是一个纯的 html5 播放器，我个人认为 flash 已经可以拜拜了但是由于默认的 html5 的 video 标签只支持 mp4，所以 ep 还预留了 hls、flv 的开关，用来决定是否引用第三方库来完成对 m3u8、flv 的解析

高颜值

什么 ui 算是高颜值，其实高颜值的 ui 不是特效多、动画多，而是足够统一 ep 初始化的时候会强制传一个色值，这个色值是对应你们网站配色的，可以保证完美适配任何网站配色

同时，ep 的动画都是纯 css 写的，嗯………我向来都是 css 闭眼写

移动端兼容

这是个无比尴尬的事情，播放器对移动端兼容，真的很困难，为什么？

因为无论是 ios 还是 android ，不同的浏览器都会对 video 进行重画 UI

尤其是国产的乱七杂八的浏览器，根本无法控制

几乎所有的播放器，dp、ck 都没能做到

ep 的做法是，移动端会将 video 画到 canvas 上，这样可以不被浏览器识别并重新绘制 UI，但是 canvas 也有很多问题，比如性能和清晰度无法同时达到最佳

所以 pc 端并没有采用这种保守的策略

TO DO……

中间件机制

和 dplayer 不同，ep 为了保持足够小，不会一把梭，把所有的功能都实现 ep 主库只保留和 video 相关的 api 剩下的，比如弹幕、截图、评论，都准备以中间件的形式接入，比如这个样子：

import Eplayer from 'eplayer'
import danmu from 'danmu'
    
const ep = new Eplaer(this.$refs.player, {
    src: '001.mp4',
    themeColor: '#000'
})
    
ep.use(danmu)   
复制代码