🎯 A web-components html5 video player facing future.
- ep 基于 web-component,为了兼容,需要事先引入 polyfill
<script src="https://unpkg.com/@webcomponents/webcomponentsjs"></script>
- 插入
e-player
标签,没错,只需要将平时用的video
换成e-player
即可
<e-player src="./001.mp4"></e-player>
type 属性可选,默认为 mp4,支持 hls 和 flv
- 注册
customElement
,注意type=module
,使用 es6 的 import
<script type="module">
import { Eplayer } from 'https://unpkg.com/eplayer'
//注册 customElement
customElements.define('e-player', Eplayer)
</script>
- 可选定制 css,用于穿透 shadow-dom 预留的默认样式
e-player {
/* 主题色 默认为 clicli 同款青*/
--theme: #00fff6;
/* 进度条底色 一般不用设置 */
--progress: rgba(255, 255, 255, 0.3);
/* 进度条偏移颜色 一般不用设置 */
--buffer: rgba(255, 255, 255, 0.6);
/* 图标颜色 一般不用设置 */
--icons: rgba(255, 255, 255, 0.6);
}
原生支持 mp4
和 mkv
,如果需要支持 m3u8
,需要先引入 hls.js
<script src="https://unpkg.com/hls.js"></script>
yarn add eplayer -S
同样的注册 customElement,但是注意,customElement 只能注册一次,然后还没完,往下看:
omim 是腾讯前端框架 omi 的组件库分支,eplayer 已经集成进去
vue 默认是不支持 web-components 的,它无法主动判断含有-
的是 vue 组件还是 web 组件
所以需要手动配置,忽略掉e-player
Vue.config.ignoredElements = [
'e-player'
]
然后,同样需要引入上面的几个文件,然后 bind 一下 src 和 type
<e-player :src="url" :type="type"></e-player>
可以封装成 vue 组件来使用:vue-web-components-wrapper
react 直接支持 customElement,直接在 render 函数中e-player
标签
比如,下面这个 fre 的粒子
function EPlayer ({ src, type }) {
const [url, setUrl] = useState(0)
useEffect(() => {
fetch(`https://jx.clicli.us/jx?url=${src}@dogecloud`)
.then(res => res.json())
.then(data => {
setUrl(data.url)
})
}, [])
return <e-player src={url} type={type} />
}
完整代码在这里:fre-eplayer
ssr 服务端没有 web-components 的 API,通常 web-components 的 ssr 都会通过一些库去模拟这些 API
eplayer 不推荐这么做,请直接和正常的 html 引入方式一样,引入 cdn
暂时不支持移动端,急需 pr 嘿嘿