{"id":13880847,"url":"https://github.com/chintan9/plyr-react","last_synced_at":"2025-05-14T13:06:36.203Z","repository":{"id":36473393,"uuid":"226979430","full_name":"chintan9/plyr-react","owner":"chintan9","description":"A simple, accessible and customisable react media player for Video, Audio, YouTube and Vimeo","archived":false,"fork":false,"pushed_at":"2025-02-03T09:40:13.000Z","size":15330,"stargazers_count":494,"open_issues_count":53,"forks_count":55,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-07T19:02:49.931Z","etag":null,"topics":["accessibility","hacktoberfest","hacktoberfest2022","hook","javascript","media","player","plyr","react","react-hook","react-hooks","reactjs","typescript","video","vimeo","youtube"],"latest_commit_sha":null,"homepage":"https://github.com/chintan9/plyr-react","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chintan9.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-12-09T22:23:21.000Z","updated_at":"2025-04-08T08:28:38.000Z","dependencies_parsed_at":"2023-11-29T01:26:59.729Z","dependency_job_id":"77ec86e8-b7f9-4511-b72e-6e76f1a27dca","html_url":"https://github.com/chintan9/plyr-react","commit_stats":{"total_commits":713,"total_committers":17,"mean_commits":41.94117647058823,"dds":0.7545582047685835,"last_synced_commit":"f8487b670e7b684cbdad100d63b5308b65f97430"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chintan9%2Fplyr-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chintan9%2Fplyr-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chintan9%2Fplyr-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chintan9%2Fplyr-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chintan9","download_url":"https://codeload.github.com/chintan9/plyr-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254149953,"owners_count":22022851,"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":["accessibility","hacktoberfest","hacktoberfest2022","hook","javascript","media","player","plyr","react","react-hook","react-hooks","reactjs","typescript","video","vimeo","youtube"],"created_at":"2024-08-06T08:03:32.633Z","updated_at":"2025-05-14T13:06:31.188Z","avatar_url":"https://github.com/chintan9.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003ePlyr React\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/23579958/143738613-d374adcf-24b8-4f44-8e75-673d5681c1a5.png\" title=\"plyr-react\" alt=\"plyr-react logo\" width=\"450\"\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\nA responsive media player that is simple, easy to use, and customizable for video, audio, YouTube, and Vimeo.\n  \u003cbr\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Tree%20Shakeable-d4e157\" alt=\"tree-shakeable\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Side%20Effect%20Free-ffeb3b\" alt=\"side-effect free\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/chintan9/plyr-react/blob/master/LICENSE\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/License-MIT-yellow.svg?style=flat\u0026colorA=000000\u0026colorB=000000\" alt=\"License\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/plyr-react\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/plyr-react?style=flat\u0026colorA=000000\u0026colorB=000000\" alt=\"Version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/plyr-react\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/dt/plyr-react.svg?style=flat\u0026colorA=000000\u0026colorB=000000\" alt=\"Downloads\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nYou can see a live demo [here](https://githubbox.com/chintan9/plyr-react/tree/master/example/react).\n\n\u003e Make sure to select the version for the plyr-react in the dependencies.\n\n## Installation\n\n```bash\n# NPM\nnpm install plyr-react\n\n# Yarn\nyarn add plyr-react\n```\n\n## Usage\n\n### Ready to use `\u003cPlyr /\u003e` component\n\nThe simplest form of react integration with the plyr is to use the `\u003cPlyr /\u003e` component, it is best for the static\nvideos.\n\n```tsx\nimport Plyr from \"plyr-react\"\nimport \"plyr-react/plyr.css\"\n\nconst plyrProps = {\n  source: undefined, // https://github.com/sampotts/plyr#the-source-setter\n  options: undefined, // https://github.com/sampotts/plyr#options\n  // Direct props for inner video tag (mdn.io/video)\n}\n\nfunction MyPlyrVideo() {\n  return \u003cPlyr {...plyrProps} /\u003e\n}\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eOld version 4 plyr-react\u003c/summary\u003e\n- The path for an import of css styles has been changed in version 5, if you are using the version 4, apply following change in the above code\n\n```diff\n- import \"plyr-react/plyr.css\"\n+ import \"plyr-react/dist/plyr.css\"\n```\n\n\u003c/details\u003e\n\n### Ready to use `usePlyr` hook\n\nIf you need the full control over all if possible integration one can imagine, usePlyr is your hook. Here is a simple\nand exact Plyr component made with the `usePlyr` hook. Are curios about how it works follow\nthis [thread](https://github.com/chintan9/plyr-react/issues/732#issuecomment-1029714462) and\nthis [proposal](https://github.com/chintan9/plyr-react/issues/678#issue-1043113412).\n\n```jsx\nconst Plyr = React.forwardRef((props, ref) =\u003e {\n  const { source, options = null, ...rest } = props\n  const raptorRef = usePlyr(ref, {\n    source,\n    options,\n  })\n  return \u003cvideo ref={raptorRef} className=\"plyr-react plyr\" {...rest} /\u003e\n})\n```\n\n### Accessing the plyr instance using refs\n\n```tsx\n// Function base component\nconst MyComponent = () =\u003e {\n  const ref = useRef()\n\n  useEffect(() =\u003e {\n    console.log(\"internal plyr instance:\", ref.current.plyr)\n  })\n\n  return \u003cPlyr ref={ref} /\u003e\n}\n\n// Class base component\nclass MyComponent extends Component {\n  constructor(props) {\n    super(props)\n    this.player = createRef()\n  }\n\n  componentDidMount() {\n    console.log(\"internal plyr instance\", this.player.current.plyr)\n  }\n\n  render() {\n    return \u003cPlyr ref={(player) =\u003e (this.player.current = player)} /\u003e\n  }\n}\n```\n\n## API:\n\nCurrently the exported APIs contains a latest instance of plyr.  \nIn other words, the passing ref will have access to the player in the structure shown below.\n\n```jsx\nreturn \u003cPlyr ref={ref} /\u003e\n\n// ref can get access to latest plyr instance with `ref.current.plyr`\nref = { current: { plyr } }\n\n// so you can make your player fullscreen 🎉\nref.current.plyr.fullscreen.enter()\n```\n\n## Example\n\n\u003e You can fork these examples\n\n**Javascript\nexample:** \u003ca href=\"https://stackblitz.com/edit/react-fpmwns?file=src/App.js\" title=\"stackblitz example (js)\"\u003e\n\u003cimg src=\"https://developer.stackblitz.com/img/open_in_stackblitz.svg\" alt=\"stackblitz example (js)\" width=\"185\"\u003e\n\u003c/a\u003e\n\n**Typescript\nexample:** \u003ca href=\"https://codesandbox.io/s/plyr-react-new-api-forked-cg08k?file=/src/App.tsx\" title=\"codesandbox example (ts)\"\u003e\n\u003cimg src=\"https://codesandbox.io/static/img/play-codesandbox.svg\" alt=\"codesandbox example (ts)\" width=\"185\"\u003e\n\u003c/a\u003e\n\n**Basic HLS\nintegration** \u003ca href=\"https://codesandbox.io/s/hidden-frost-mpdjj?file=/src/HLS.tsx\" title=\"codesandbox example (ts)\"\u003e\nCodesandbox\n\u003c/a\u003e\n\n\u003e Check out the examples directory for the useHls integration guide.\n\n```jsx\n\u003cvideo\n  ref={usePlyr(ref, {\n    ...useHls(hlsSource, options),\n    source,\n  })}\n  className=\"plyr-react plyr\"\n/\u003e\n```\n\n**Demo:** https://react-fpmwns.stackblitz.io\n\n## Nightly version of plyr-react:\n\n\u003ca href=\"https://github.com/chintan9/plyr-react/tree/dev/example\" title=\"Early access for nightly version\"\u003e\n \u003cimg src=\"https://user-images.githubusercontent.com/23579958/150494317-912b4ce3-8d22-4c05-aec5-a28934d2f2e7.png\"\u003e\n\u003c/a\u003e\n\n## Contribute\n\nWe are open to all new contribution, feel free to\nread [CONTRIBUTING](https://github.com/chintan9/plyr-react/blob/master/CONTRIBUTING.md)\nand [CODE OF CONDUCT](https://github.com/chintan9/plyr-react/blob/master/CODE_OF_CONDUCT.md) section, make new issue to\ndiscuss about the problem\n[![Gitter](https://badges.gitter.im/plyr-react/community.svg)](https://gitter.im/plyr-react/community?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge), and improve/fix/enhance the source code with your PRs. There is a ready to code Gitpod, you\ncan jump into it\nfrom \u003ca href=\"https://gitpod.io/#https://github.com/chintan9/plyr-react\" title=\"Gitpod plyr-react\"\u003e\u003cimg src=\"https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod\" alt=\"Gitpod Ready-to-Code\"\u003e\u003ca/\u003e\n\n## Support\n\nIf you like the project and want to support my work, give star ⭐ or fork it.\n[![Featured on Openbase](https://badges.openbase.com/js/featured/plyr-react.svg?token=taplQ9iU8GI6oqsRiTD6H6Dl4A4o787VVK0gS6m3RKo=)](https://openbase.com/js/plyr-react?utm_source=embedded\u0026amp;utm_medium=badge\u0026amp;utm_campaign=rate-badge)\n\n## Thanks\n\n- [@realamirhe](https://github.com/realamirhe) For provide help for integrate to react-aptor.\n- [@iwatakeshi](https://github.com/iwatakeshi) For provide help for convert to typescript.\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchintan9%2Fplyr-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchintan9%2Fplyr-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchintan9%2Fplyr-react/lists"}