{"repo":"yisar/eplayer","free":true,"listed":false,"github":"https://github.com/yisar/eplayer","clone":"git clone https://github.com/yisar/eplayer.git","description":":crystal_ball: A web-component html5 video player facing future","language":null,"stars":283,"topics":["player","html5-video","hls-player","html5-player","video-player","web-components","shadow-dom","scoped-css","custom-css"],"license":null,"category":"ui-components","readme_excerpt":"eplayer :dart: A web-components html5 video player facing future. who use eplayer？ eplayer.js.org - demo clicli - C 站 Contributors 感谢大家的 pr，阿里嘎多！ Use 0. ep 基于 web-component，为了兼容，需要事先引入 polyfill 1. 插入 e-player 标签，没错，只需要将平时用的 video 换成 e-player 即可 type 属性可选，默认为 mp4，支持 hls 和 flv 2. 注册 customElement ，注意 type=module ，使用 es6 的 import 3. 可选定制 css，用于穿透 shadow-dom 预留的默认样式 4. 可选定制插件，会在右击菜单中出现一个选项，触发点击事件 hls 原生支持 mp4 和 mkv ,如果需要支持 m3u8 ，需要先引入 hls.js Npm 同样的注册 customElement，但是注意，customElement 只能注册一次，然后还没完，往下看： omim omim 是腾讯前端框架 omi 的组件库分支，eplayer 已经集成进去 戳我戳我 Vue vue 默认是不支持 web-components 的，它无法主动判断含有 - 的是 vue 组件还是 web 组件 所以需要手动配置，忽略掉 e-player 然后，同样需要引入上面的几个文件，然后 bind 一下 src 和 type 可以封装成 vue 组件来使用：vue-web-components-wrapper React / Fre react 直接支持 customElement，直接在 render 函数中 e-player 标签 比如，下面这个 fre 的粒子 完整代码在这里：fre-eplayer Angular 在 angular.json 中添加 webcomponentsjs 和 hls.js 在 app.component.ts 中引入 eplayer 在需要使用 eplayer 的模块中启用自定义元素的支持 在相应的 html 文件中对 src 和 type 绑定 完整项目示例: @cliclitv/pwa ssr ssr 服务端没有 web-components 的 API，通常 web-components 的 ssr 都会通过一些库去模拟这些 API eplayer 不推荐这么做，请直接和正常的 html 引入方式一样，引入 cdn WAP WAP 端建议使用原生播放器，国产浏览器太乱了，没得兼容，同时建议往 APP 上引流 Screenshot","default_branch":null,"files":null,"tree":[],"storefront":"/r/yisar","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/yisar/eplayer/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}