{"id":23283582,"url":"https://github.com/goblin-laboratory/reactjs-player","last_synced_at":"2025-03-16T16:11:06.342Z","repository":{"id":45619795,"uuid":"161133695","full_name":"goblin-laboratory/reactjs-player","owner":"goblin-laboratory","description":"基于 react hooks 的 video 播放组件，结构简单，代码简洁，扩展方便。","archived":false,"fork":false,"pushed_at":"2024-09-08T02:24:34.000Z","size":34787,"stargazers_count":35,"open_issues_count":0,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-07T18:02:18.521Z","etag":null,"topics":["flvjs","grandplayer","hlsjs","hooks","reactjs"],"latest_commit_sha":null,"homepage":"https://goblin-laboratory.github.io/reactjs-player/","language":"JavaScript","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/goblin-laboratory.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"docs/CONTRIBUTING.md","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}},"created_at":"2018-12-10T07:19:39.000Z","updated_at":"2024-06-19T11:33:37.000Z","dependencies_parsed_at":"2024-06-21T14:12:59.298Z","dependency_job_id":"f0b68bde-bd69-4771-bd04-dd4d08dc5ddf","html_url":"https://github.com/goblin-laboratory/reactjs-player","commit_stats":{"total_commits":260,"total_committers":2,"mean_commits":130.0,"dds":0.08846153846153848,"last_synced_commit":"c5cff57b5263257ca7384b0539ed261b18382d93"},"previous_names":["goblin-laboratory/react-player"],"tags_count":54,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goblin-laboratory%2Freactjs-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goblin-laboratory%2Freactjs-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goblin-laboratory%2Freactjs-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goblin-laboratory%2Freactjs-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/goblin-laboratory","download_url":"https://codeload.github.com/goblin-laboratory/reactjs-player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243746238,"owners_count":20341204,"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","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":["flvjs","grandplayer","hlsjs","hooks","reactjs"],"created_at":"2024-12-20T01:22:39.951Z","updated_at":"2025-03-16T16:11:06.314Z","avatar_url":"https://github.com/goblin-laboratory.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![ReactjsPlayer](./docs/logo128x128.png)\n\n# ReactjsPlayer\n\n[![npm](https://img.shields.io/npm/v/reactjs-player.svg?color=blue\u0026style=flat-square)](https://www.npmjs.com/package/reactjs-player)\n[![reactjs-player](https://img.shields.io/bundlephobia/minzip/reactjs-player.svg?style=flat-square)](https://www.npmjs.com/package/reactjs-player)\n[![Travis (.org)](https://img.shields.io/travis/goblin-laboratory/reactjs-player.svg?style=flat-square)](https://travis-ci.org/goblin-laboratory/reactjs-player)\n[![Coveralls github](https://img.shields.io/coveralls/github/goblin-laboratory/reactjs-player.svg?style=flat-square)](https://coveralls.io/github/goblin-laboratory/reactjs-player)\n\n基于 react hooks 的 video 播放组件，结构简单，代码简洁，扩展方便。\n\n## 特点\n\n`ReactjsPlayer` 遵循 `少即是多（Less is more）` 的设计原则，具有以下特点：\n\n- 结构简单：使用 `react hooks` 做状态管理，将不同的状态拆分到不同的 `react custom hooks` 中，`ReactjsPlayer` 中进行组合\n\n- 扩展方便：扩展时实现对应的 `react custom hooks` 并在 `ReactjsPlayer` 中根据条件进行加载\n\n- 代码简洁：只做播放器内部的状态管理和控制栏显示与控制\n\n- 理解容易： `ReactjsPlayer` 事件基于 `vidoe` [媒体事件](https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Media_events) 进行扩展，减小理解成本\n\n- 接口统一：`ReactjsPlayer` 与 `GrindPlayer` 封装了统一的状态和方法，并通过 `ReactPlayerContext` 导出\n\n- 使用相对复杂：不同于其他的 h5 播放器，`ReactjsPlayer` 将控制权交给使用者，无法做到一行代码播放所有兼容的格式\n\n## Getting started\n\n```\ngit clone https://github.com/goblin-laboratory/reactjs-player.git\ncd reactjs-player\nyarn install\n```\n\n```\ncd packages/reactjs-player/\nyarn start\n```\n\n```\ncd packages/reactjs-player-demo/\nyarn start\n```\n\n## Usage\n\nDemo page: https://goblin-laboratory.github.io/reactjs-player/\n\n```\nnpm install reactjs-player --save\n# or\nyarn add reactjs-player\n```\n\n```js\nimport React, { Component } from 'react';\nimport ReactjsPlayer from 'reactjs-player';\n\nconst App = () =\u003e {\n  return \u003cReactjsPlayer kernel=\"hlsjs\" src=\"https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8\" /\u003e;\n};\n```\n\n常用场景见说明文档：[Usage.md](https://github.com/goblin-laboratory/reactjs-player/blob/master/docs/Usage.md)\n\n## TODO\n3.x 版本计划\n1. 使用 TypeScript 重构\n2. 使用 tsdx 负责打包\n3. Jest 自动化测试\n4. storybook\n\n## API\n\n见 API 说明文档：[API.md](https://github.com/goblin-laboratory/reactjs-player/blob/master/docs/API.md)\n\n## 注意事项\n\n1. reactjs-player `position` 为 `absolute` ， 大小和位置依赖相对于 static 定位以外的第一个父元素，建议将父节点 `position` 设置为 `relative`，通过控制父节点的大小和位置来控制 reactjs-player 的布局结果，可以参考 demo 中的实现\n\n2. GrindPlayer 必须要大于 400x300 才能正常播放，请保证播放区域不小于 400x300，否则画面会出现显示不全的情况\n\n\n## Supported media\n\n- HLS\n- FLV\n- RTMP\n\n\u003c!-- ## 微信同层播放\n\n待补充 --\u003e\n\n## Contributing\n\n非常欢迎你的贡献，你可以通过以下方式和我们一起共建 😃：\n\n- 通过 Issue 报告 bug 或进行咨询。\n- 提交 Pull Request 。\n\n## Licensing\n\nReactjsPlayer is [MIT licensed](./docs/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoblin-laboratory%2Freactjs-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoblin-laboratory%2Freactjs-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoblin-laboratory%2Freactjs-player/lists"}