A web-components html5 video player facing future
npm install eplayer
html
`
1. 插入 e-player 标签,没错,只需要将平时用的 video 换成 e-player 即可
`html
`
type 属性可选,默认为 mp4,支持 hls 和 flv
2. 注册 customElement,注意 type=module,使用 es6 的 import
`html
`
3. 可选定制 css,用于穿透 shadow-dom 预留的默认样式
`css
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);
}
`
4. 可选定制插件,会在右击菜单中出现一个选项,触发点击事件
`js
Eplayer.use('github源码', ep => {
// ep 为 shdow-root 元素
window.location.href = 'https://github.com/132yse/eplayer'
})
`
#### hls
原生支持 mp4 和 mkv ,如果需要支持 m3u8,需要先引入 hls.js
`html
`
$3
`shell
yarn add eplayer -S
`
同样的注册 customElement,但是注意,customElement 只能注册一次,然后还没完,往下看:
#### omim
omim 是腾讯前端框架 omi 的组件库分支,eplayer 已经集成进去
戳我戳我
#### Vue
vue 默认是不支持 web-components 的,它无法主动判断含有-的是 vue 组件还是 web 组件
所以需要手动配置,忽略掉e-player
`JavaScript
Vue.config.ignoredElements = [
'e-player'
]
`
然后,同样需要引入上面的几个文件,然后 bind 一下 src 和 type
`html
`
可以封装成 vue 组件来使用:vue-web-components-wrapper
#### React / Fre
react 直接支持 customElement,直接在 render 函数中e-player标签
比如,下面这个 fre 的粒子
`js
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
}
`
完整代码在这里:fre-eplayer
#### Angular
在 angular.json 中添加 webcomponentsjs 和 hls.js
`json
...
"scripts": [
"node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js",
"node_modules/hls.js/dist/hls.min.js"
]
...
`
在 app.component.ts 中引入 eplayer
`ts
import { Component, OnInit } from "@angular/core";
import Eplayer from "eplayer";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
})
export class AppComponent implements OnInit {
ngOnInit(): void {
customElements.define("e-player", Eplayer);
}
}
`
在需要使用 eplayer 的模块中启用自定义元素的支持
`ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { CommonModule } from "@angular/common";
import { VideoComponent } from "./video.component";
@NgModule({
declarations: [VideoComponent],
imports: [CommonModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class VideoModule {}
`
在相应的 html 文件中对 src 和 type 绑定
`html
``