132yse/eplayer

🎯 A web-components html5 video player facing future.

who use eplayer？

epayer.js.org - 官网（demo）

clicli.us - C 站

Install

yarn add eplayer -S

Use

1. 导入进来 js 文件，可以从 lib 目录获取

目前 web-components 原生支持度是在太差，尤其是国内各种奇葩浏览器（搜狗、QQ等），需要引入 polyfill

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.2.1/webcomponents-bundle.js"></script>
<script src="./eplayer.js"></script>

1. 插入 e-player 标签，没错，只需要将平时用的 video 换成 e-player 即可

type 属性可选，默认为 mp4

<e-player src="./001.mp4"></e-player>

1. 可选设置css，用于穿透 shadow-dom 预留的默认样式

e-player {
  /* 主题色 默认为哔哩哔哩同款蓝*/
  --theme:#f13e7b;
  /* 进度条底色 一般不用设置 */
  --progress:rgba(255,255,255,.3);
  /* 进度条偏移颜色 一般不用设置 */
  --buffer:rgba(255,255,255,.3);
  /* 图标颜色 一般不用设置 */
  --icons:rgba(255,255,255,.6)
}

1. 原生支持 mp4 和 mkv ,如果需要支持 m3u8 和 flv，需要先引入 hls.js 和 flv.js

这两个文件太大，建议手动 gzip

<script src="./hlv.min.js"></script>
<script src="./flv.min.js"></script>

然后，type 属性 对应 hls 或 flv

<e-player src="./001.m3u8" type="hls"></e-player>

另外，关于移动端，国产的手机浏览器太奇葩，没有好的兼容方法 目前会自动检测，移动端会自动替换为默认播放器，然后浏览器会自动替换 UI

development

yarn start

Screenshot