Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yisar/eplayer
:crystal_ball: A web-component html5 video player facing future
https://github.com/yisar/eplayer
custom-css hls-player html5-player html5-video player scoped-css shadow-dom video-player web-components
Last synced: 4 days ago
JSON representation
:crystal_ball: A web-component html5 video player facing future
- Host: GitHub
- URL: https://github.com/yisar/eplayer
- Owner: yisar
- Created: 2018-09-14T12:42:47.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-07-15T06:49:50.000Z (6 months ago)
- Last Synced: 2024-12-28T01:27:31.252Z (6 days ago)
- Topics: custom-css, hls-player, html5-player, html5-video, player, scoped-css, shadow-dom, video-player, web-components
- Homepage: https://eplayer.js.org
- Size: 778 KB
- Stars: 281
- Watchers: 11
- Forks: 30
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# eplayer [](https://npmjs.com/package/eplayer) [](https://npmjs.com/package/eplayer)
:dart: A web-components html5 video player facing future.
#### who use eplayer？
[eplayer.js.org - demo](https://eplayer.js.org/)
[clicli - C 站](https://www.clicli.me/)
#### Contributors
感谢大家的 pr，阿里嘎多！
### Use
0. ep 基于 web-component，为了兼容，需要事先引入 polyfill
```html
```
1. 插入 `e-player` 标签，没错，只需要将平时用的 `video` 换成 `e-player` 即可
```html
```
type 属性可选，默认为 mp4，支持 hls 和 flv
2. 注册 `customElement`，注意 `type=module`，使用 es6 的 import
```html
import Eplayer from 'https://unpkg.com/eplayer?module'
//注册 customElement
customElements.define('e-player', Eplayer)
```
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
```
### Npm
```shell
yarn add eplayer -S
```
同样的注册 customElement，但是注意，customElement 只能注册一次，然后还没完，往下看：
#### omim
omim 是腾讯前端框架 [omi](https://github.com/Tencent/omi) 的组件库分支，eplayer 已经集成进去
[戳我戳我](https://github.com/Tencent/omi/tree/master/packages/omim/demos/player)
#### Vue
vue 默认是不支持 web-components 的，它无法主动判断含有`-`的是 vue 组件还是 web 组件
所以需要手动配置，忽略掉`e-player`
```JavaScript
Vue.config.ignoredElements = [
'e-player'
]
```
然后，同样需要引入上面的几个文件，然后 bind 一下 src 和 type
```html
```
可以封装成 vue 组件来使用：[vue-web-components-wrapper](https://github.com/vuejs/vue-web-component-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](https://github.com/cliclitv/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
```
完整项目示例: [@cliclitv/pwa](https://github.com/cliclitv/pwa)
#### ssr
ssr 服务端没有 web-components 的 API，通常 web-components 的 ssr 都会通过一些库去模拟这些 API
eplayer 不推荐这么做，请直接和正常的 html 引入方式一样，引入 cdn
#### WAP
WAP 端建议使用原生播放器，国产浏览器太乱了，没得兼容，同时建议往 APP 上引流
#### Screenshot
