yisar / eplayer

:crystal_ball: A web-component html5 video player facing future

Home Page:https://eplayer.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

eplayer logo

eplayer NPM version NPM downloads

🎯 A web-components html5 video player facing future.

who use eplayer?

eplayer.js.org - demo

clicli - C 站

Contributors

感谢大家的 pr,阿里嘎多!

Use

  1. ep 基于 web-component,为了兼容,需要事先引入 polyfill
<script src="https://unpkg.com/@webcomponents/webcomponentsjs"></script>
  1. 插入 e-player 标签,没错,只需要将平时用的 video 换成 e-player 即可
<e-player src="./001.mp4"></e-player>

type 属性可选,默认为 mp4,支持 hls 和 flv

  1. 注册 customElement,注意 type=module,使用 es6 的 import
<script type="module">
  import Eplayer from 'https://unpkg.com/eplayer?module'
  //注册 customElement
  customElements.define('e-player', Eplayer)
</script>
  1. 可选定制 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);
}
  1. 可选定制插件,会在右击菜单中出现一个选项,触发点击事件
Eplayer.use('github源码', ep => {
  // ep 为 shdow-root 元素
  window.location.href = 'https://github.com/132yse/eplayer'
})

hls

原生支持 mp4mkv ,如果需要支持 m3u8,需要先引入 hls.js

<script src="https://unpkg.com/hls.js"></script>

Npm

yarn add eplayer -S

同样的注册 customElement,但是注意,customElement 只能注册一次,然后还没完,往下看:

omim

omim 是腾讯前端框架 omi 的组件库分支,eplayer 已经集成进去

戳我戳我

Vue

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 / Fre

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

angular.json 中添加 webcomponentsjshls.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 文件中对 srctype 绑定

<e-player [attr.src]="src" [attr.type]="type"></e-player>

完整项目示例: @cliclitv/pwa

ssr

ssr 服务端没有 web-components 的 API,通常 web-components 的 ssr 都会通过一些库去模拟这些 API

eplayer 不推荐这么做,请直接和正常的 html 引入方式一样,引入 cdn

WAP

WAP 端建议使用原生播放器,国产浏览器太乱了,没得兼容,同时建议往 APP 上引流

Screenshot

About

:crystal_ball: A web-component html5 video player facing future

https://eplayer.js.org


Languages

Language:JavaScript 100.0%