{"id":13470766,"url":"https://feawesome.github.io/react-awesome-player/","last_synced_at":"2025-03-26T11:33:21.179Z","repository":{"id":143904748,"uuid":"196301205","full_name":"feawesome/react-awesome-player","owner":"feawesome","description":"🔥 video.js component for React","archived":false,"fork":false,"pushed_at":"2020-11-09T07:24:43.000Z","size":663,"stargazers_count":63,"open_issues_count":2,"forks_count":27,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-30T01:59:26.530Z","etag":null,"topics":["react","react-awesome","react-awesome-player","react-video","react-video-player","videojs"],"latest_commit_sha":null,"homepage":"https://feawesome.github.io/react-awesome-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/feawesome.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}},"created_at":"2019-07-11T01:53:00.000Z","updated_at":"2024-07-22T15:12:34.000Z","dependencies_parsed_at":"2024-01-18T20:20:32.707Z","dependency_job_id":null,"html_url":"https://github.com/feawesome/react-awesome-player","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feawesome%2Freact-awesome-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feawesome%2Freact-awesome-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feawesome%2Freact-awesome-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feawesome%2Freact-awesome-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/feawesome","download_url":"https://codeload.github.com/feawesome/react-awesome-player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245644658,"owners_count":20649240,"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":["react","react-awesome","react-awesome-player","react-video","react-video-player","videojs"],"created_at":"2024-07-31T16:00:35.674Z","updated_at":"2025-03-26T11:33:16.171Z","avatar_url":"https://github.com/feawesome.png","language":"JavaScript","funding_links":[],"categories":["react-awesome-player"],"sub_categories":["Example"],"readme":"[![GitHub stars](https://img.shields.io/github/stars/feawesome/react-awesome-player.svg?style=flat-square)](https://github.com/feawesome/react-awesome-player/stargazers)\n[![GitHub issues](https://img.shields.io/github/issues/feawesome/react-awesome-player.svg?style=flat-square)](https://github.com/feawesome/react-awesome-player/issues)\n[![GitHub forks](https://img.shields.io/github/forks/feawesome/react-awesome-player.svg?style=flat-square)](https://github.com/feawesome/react-awesome-player/network)\n[![GitHub last commit](https://img.shields.io/github/last-commit/google/skia.svg?style=flat-square)](https://github.com/feawesome/react-awesome-player)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/feawesome/react-awesome-player)\n[![Twitter](https://img.shields.io/twitter/url/https/github.com/feawesome/react-awesome-player.svg?style=flat-square)](https://twitter.com/intent/tweet?url=https://github.com/feawesome/react-awesome-player)\n\n[![NPM](https://nodei.co/npm/react-awesome-player.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/react-awesome-player/)\n[![NPM](https://nodei.co/npm-dl/react-awesome-player.png?months=9\u0026height=3)](https://nodei.co/npm/react-awesome-player/)\n\n\n## react-awesome-player\n\n[video.js](https://github.com/videojs/video.js) player component for React.\n\nSecondary development based on video.js, perfectly compatible with React , support subtitle display and the live stream of HLS. It is an awesome plugin for playing video on webpage.\nIf anything goes wrong during using, please submit issues in this repository, or send email to author: **returnzp@gmail.com**\n\n### Example\n\n* [Demo Page](https://feawesome.github.io/react-awesome-player)\n* Demo Code\n```jsx\nimport React from 'react'\nimport { render } from 'react-dom'\nimport ReactAwesomePlayer from 'react-awesome-player'\n\nclass App extends React.Component {\n  state = {\n    options: {\n      poster: \"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=854361313,3188166359\u0026fm=26\u0026gp=0.jpg\",\n      sources: [{\n        type: \"video/mp4\",\n        src: \"https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm\"\n      }],\n      subtitles: [{\n          language: 'zh',\n          url: \"https://feawesome.github.io/react-awesome-player/zh.vtt\",\n          label: \"中文\"\n        },\n        {\n          language: 'en',\n          url: \"https://feawesome.github.io/react-awesome-player/en.vtt\",\n          label: \"EN\"\n      }],\n      defaultSubtitle: 'en'\n    }\n  }\n  loadeddata() {\n    console.log('loadeddata')\n  }\n  canplay() {\n    console.log('canplay')\n  }\n  canplaythrough() {\n    console.log('canplaythrough')\n  }\n  play() {\n    console.log('play')\n  }\n  pause() {\n    console.log('pause')\n  }\n  waiting() {\n    console.log('waiting')\n  }\n  playing() {\n    console.log('playing')\n  }\n  ended() {\n    console.log('ended')\n  }\n  error() {\n    console.log('error')\n  }\n\n  render () {\n    const { options } = this.state\n    return \u003cdiv className=\"test-demo\"\u003e\n      \u003cReactAwesomePlayer\n        onRef={video =\u003e { console.log(video) }}\n        options={options}\n        loadeddata={this.loadeddata}\n        canplay={this.canplay}\n        canplaythrough={this.canplaythrough}\n        play={this.play}\n        pause={this.pause}\n        waiting={this.waiting}\n        playing={this.playing}\n        ended={this.ended}\n        error={this.error}\n      /\u003e\n    \u003c/div\u003e\n  }\n}\n\nrender(\u003cApp /\u003e, document.getElementById('root'))\n\n```\n\n\n### Install\n#### NPM\n\n``` bash\nnpm install react-awesome-player --save\n```\n\n\n### API\n- component api:\n\n| API | description | type | default |\n| -   | -           | -    | -       |\n| events   | custom videojs event to component | Array | [] |\n| playsInline   | set player not full-screen in mobile device | Boolean | true |\n| crossOrigin   | set crossOrigin to video | String | '' |\n\n- video.js api\n  * [video.js options](http://docs.videojs.com/tutorial-options.html)\n  * [video.js docs](http://docs.videojs.com/)\n\n### videojs plugins\n\n- [videojs-resolution-switcher](https://github.com/kmoskwiak/videojs-resolution-switcher)\n- [videojs-contrib-hls](https://github.com/videojs/videojs-contrib-hls)\n- [videojs-youtube](https://github.com/videojs/videojs-youtube)\n- [videojs-vimeo](https://github.com/videojs/videojs-vimeo)\n- [videojs-hotkeys](https://github.com/ctd1500/videojs-hotkeys)\n- [videojs-flash](https://github.com/videojs/videojs-flash)\n- [videojs-contrib-ads](https://github.com/videojs/videojs-contrib-ads)\n- [more plugins...](https://github.com/search?o=desc\u0026q=videojs+plugin\u0026s=stars\u0026type=Repositories\u0026utf8=%E2%9C%93)\n\n\n### Author\n**Peng Zhang**\n**returnzp@gmail.com**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/feawesome.github.io%2Freact-awesome-player%2F","html_url":"https://awesome.ecosyste.ms/projects/feawesome.github.io%2Freact-awesome-player%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/feawesome.github.io%2Freact-awesome-player%2F/lists"}