🎯 A web-components html5 video player facing future.
感谢大家的 pr，阿里嘎多！
- 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?module'
//注册 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);
}- 可选定制插件，会在右击菜单中出现一个选项，触发点击事件
Eplayer.use('github源码', ep => {
// ep 为 shdow-root 元素
window.location.href = 'https://github.com/132yse/eplayer'
})原生支持 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
在 angular.json 中添加 webcomponentsjs 和 hls.js
...
"scripts": [
"node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js",
"node_modules/hls.js/dist/hls.min.js"
]
...在 app.component.ts 中引入 eplayer
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 的模块中启用自定义元素的支持
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 绑定
<e-player [attr.src]="src" [attr.type]="type"></e-player>完整项目示例: @cliclitv/pwa
ssr 服务端没有 web-components 的 API，通常 web-components 的 ssr 都会通过一些库去模拟这些 API
eplayer 不推荐这么做，请直接和正常的 html 引入方式一样，引入 cdn
WAP 端建议使用原生播放器，国产浏览器太乱了，没得兼容，同时建议往 APP 上引流
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent