{"id":14990136,"url":"https://github.com/yisar/eplayer","last_synced_at":"2026-01-12T06:59:06.944Z","repository":{"id":57226417,"uuid":"148786895","full_name":"yisar/eplayer","owner":"yisar","description":":crystal_ball: A web-component html5 video player facing future","archived":false,"fork":false,"pushed_at":"2025-10-07T11:49:01.000Z","size":812,"stargazers_count":282,"open_issues_count":1,"forks_count":29,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-10-11T00:03:30.629Z","etag":null,"topics":["custom-css","hls-player","html5-player","html5-video","player","scoped-css","shadow-dom","video-player","web-components"],"latest_commit_sha":null,"homepage":"https://eplayer.js.org","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yisar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2018-09-14T12:42:47.000Z","updated_at":"2025-10-07T11:49:05.000Z","dependencies_parsed_at":"2024-09-28T11:28:06.966Z","dependency_job_id":"ffcf5a90-b399-441d-9c6a-67359c0aa9e5","html_url":"https://github.com/yisar/eplayer","commit_stats":{"total_commits":319,"total_committers":7,"mean_commits":45.57142857142857,"dds":"0.037617554858934144","last_synced_commit":"6ad757816251fb5f082d6757ea83987a6a73a4a4"},"previous_names":["132yse/eplayer"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/yisar/eplayer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisar%2Feplayer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisar%2Feplayer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisar%2Feplayer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisar%2Feplayer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yisar","download_url":"https://codeload.github.com/yisar/eplayer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisar%2Feplayer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279005627,"owners_count":26083940,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-css","hls-player","html5-player","html5-video","player","scoped-css","shadow-dom","video-player","web-components"],"created_at":"2024-09-24T14:19:33.888Z","updated_at":"2025-10-11T00:04:07.503Z","avatar_url":"https://github.com/yisar.png","language":null,"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"http://ww1.sinaimg.cn/large/0065Zy9egy1fvcjfzaa1lj30dw0dwwhe.jpg\" alt=\"eplayer logo\" width=\"200px\"\u003e\u003c/p\u003e\n\n# eplayer [![NPM version](https://img.shields.io/npm/v/eplayer.svg?style=flat-square)](https://npmjs.com/package/eplayer) [![NPM downloads](https://img.shields.io/npm/dt/eplayer.svg?style=flat-square)](https://npmjs.com/package/eplayer)\n\n:dart: A web-components html5 video player facing future.\n\n#### who use eplayer？\n\n[eplayer.js.org - demo](https://eplayer.js.org/)\n\n[clicli - C 站](https://www.clicli.me/)\n\n#### Contributors\n\n感谢大家的 pr，阿里嘎多！\n\n\u003ca href=\"https://github.com/yisar/eplayer/graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/eplayer/contributors.svg?width=890\u0026button=false\" /\u003e\u003c/a\u003e\n\n### Use\n\n0. ep 基于 web-component，为了兼容，需要事先引入 polyfill\n\n```html\n\u003cscript src=\"https://unpkg.com/@webcomponents/webcomponentsjs\"\u003e\u003c/script\u003e\n```\n\n1. 插入 `e-player` 标签，没错，只需要将平时用的 `video` 换成 `e-player` 即可\n\n```html\n\u003ce-player src=\"./001.mp4\"\u003e\u003c/e-player\u003e\n```\n\ntype 属性可选，默认为 mp4，支持 hls 和 flv\n\n2. 注册 `customElement`，注意 `type=module`，使用 es6 的 import\n\n```html\n\u003cscript type=\"module\"\u003e\n  import Eplayer from 'https://unpkg.com/eplayer?module'\n  //注册 customElement\n  customElements.define('e-player', Eplayer)\n\u003c/script\u003e\n```\n\n3. 可选定制 css，用于穿透 shadow-dom 预留的默认样式\n\n```css\ne-player {\n  /* 主题色 默认为 clicli 同款基佬紫*/\n  --theme: #00fff6;\n  /* 进度条底色 一般不用设置 */\n  --progress: rgba(255, 255, 255, 0.3);\n  /* 进度条偏移颜色 一般不用设置 */\n  --buffer: rgba(255, 255, 255, 0.6);\n  /* 图标颜色 一般不用设置 */\n  --icons: rgba(255, 255, 255, 0.6);\n}\n```\n\n4. 可选定制插件，会在右击菜单中出现一个选项，触发点击事件\n\n```js\nEplayer.use('github源码', ep =\u003e {\n  // ep 为 shdow-root 元素\n  window.location.href = 'https://github.com/132yse/eplayer'\n})\n```\n\n#### hls\n\n原生支持 `mp4` 和 `mkv` ,如果需要支持 `m3u8`，需要先引入 `hls.js`\n\n```html\n\u003cscript src=\"https://unpkg.com/hls.js\"\u003e\u003c/script\u003e\n```\n\n### Npm\n\n```shell\nyarn add eplayer -S\n```\n\n同样的注册 customElement，但是注意，customElement 只能注册一次，然后还没完，往下看：\n\n#### omim\n\nomim 是腾讯前端框架 [omi](https://github.com/Tencent/omi) 的组件库分支，eplayer 已经集成进去\n\n[戳我戳我](https://github.com/Tencent/omi/tree/master/packages/omim/demos/player)\n\n#### Vue\n\nvue 默认是不支持 web-components 的，它无法主动判断含有`-`的是 vue 组件还是 web 组件\n\n所以需要手动配置，忽略掉`e-player`\n\n```JavaScript\nVue.config.ignoredElements = [\n  'e-player'\n]\n```\n\n然后，同样需要引入上面的几个文件，然后 bind 一下 src 和 type\n\n```html\n\u003ce-player :src=\"url\" :type=\"type\"\u003e\u003c/e-player\u003e\n```\n\n可以封装成 vue 组件来使用：[vue-web-components-wrapper](https://github.com/vuejs/vue-web-component-wrapper)\n\n#### React / Fre\n\nreact 直接支持 customElement，直接在 render 函数中`e-player`标签\n\n比如，下面这个 fre 的粒子\n\n```js\nfunction EPlayer({ src, type }) {\n  const [url, setUrl] = useState(0)\n  useEffect(() =\u003e {\n    fetch(`https://jx.clicli.us/jx?url=${src}@dogecloud`)\n      .then(res =\u003e res.json())\n      .then(data =\u003e {\n        setUrl(data.url)\n      })\n  }, [])\n  return \u003ce-player src={url} type={type} /\u003e\n}\n```\n\n完整代码在这里：[fre-eplayer](https://github.com/cliclitv/fre-eplayer)\n\n#### Angular\n\n在 `angular.json` 中添加 `webcomponentsjs` 和 `hls.js`\n\n```json\n...\n\"scripts\": [\n  \"node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js\",\n  \"node_modules/hls.js/dist/hls.min.js\"\n]\n...\n```\n\n在 `app.component.ts` 中引入 `eplayer`\n\n```ts\nimport { Component, OnInit } from \"@angular/core\";\nimport Eplayer from \"eplayer\";\n\n@Component({\n  selector: \"app-root\",\n  templateUrl: \"./app.component.html\",\n  styleUrls: [\"./app.component.scss\"],\n})\nexport class AppComponent implements OnInit {\n  ngOnInit(): void {\n    customElements.define(\"e-player\", Eplayer);\n  }\n}\n```\n\n在需要使用 `eplayer` 的模块中启用自定义元素的支持\n\n```ts\nimport { NgModule, CUSTOM_ELEMENTS_SCHEMA } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { VideoComponent } from \"./video.component\";\n\n@NgModule({\n  declarations: [VideoComponent],\n  imports: [CommonModule],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class VideoModule {}\n```\n\n在相应的 `html` 文件中对 `src` 和 `type` 绑定\n\n```html\n\u003ce-player [attr.src]=\"src\" [attr.type]=\"type\"\u003e\u003c/e-player\u003e\n```\n\n完整项目示例: [@cliclitv/pwa](https://github.com/cliclitv/pwa)\n\n#### ssr\n\nssr 服务端没有 web-components 的 API，通常 web-components 的 ssr 都会通过一些库去模拟这些 API\n\neplayer 不推荐这么做，请直接和正常的 html 引入方式一样，引入 cdn\n\n#### WAP\n\nWAP 端建议使用原生播放器，国产浏览器太乱了，没得兼容，同时建议往 APP 上引流\n\n#### Screenshot\n\n![](https://ww1.sinaimg.cn/mw690/0065Zy9ely1g9srnm3ezpj31jg0v3kjl.jpg)\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyisar%2Feplayer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyisar%2Feplayer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyisar%2Feplayer/lists"}