{"id":15397011,"url":"https://github.com/ryanhefner/react-video-players","last_synced_at":"2025-09-01T05:33:17.934Z","repository":{"id":57347367,"uuid":"96808927","full_name":"ryanhefner/react-video-players","owner":"ryanhefner","description":"📺 Library of React video player components that offer a consistent interface and callback system for Vimeo, YouTube and the \u003cvideo\u003e tag. Along with a handy higher order component for building your own 😉","archived":false,"fork":false,"pushed_at":"2020-03-04T14:03:29.000Z","size":199,"stargazers_count":13,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-24T15:12:11.786Z","etag":null,"topics":["react","react-component","video-player","vimeo","vimeo-player","youtube","youtube-player"],"latest_commit_sha":null,"homepage":"https://www.pkgstats.com/pkg:react-video-players","language":"JavaScript","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/ryanhefner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-10T18:27:44.000Z","updated_at":"2021-04-25T21:28:20.000Z","dependencies_parsed_at":"2022-08-28T04:00:49.751Z","dependency_job_id":null,"html_url":"https://github.com/ryanhefner/react-video-players","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/ryanhefner/react-video-players","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-video-players","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-video-players/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-video-players/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-video-players/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanhefner","download_url":"https://codeload.github.com/ryanhefner/react-video-players/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-video-players/sbom","scorecard":{"id":792018,"data":{"date":"2025-08-11","repo":{"name":"github.com/ryanhefner/react-video-players","commit":"0e5e4a4e11b23fbdf57ae785107a435a55895e99"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 0/16 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 19 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"44 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T07:49:21.924Z","repository_id":57347367,"created_at":"2025-08-23T07:49:21.924Z","updated_at":"2025-08-23T07:49:21.924Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272306120,"owners_count":24910764,"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-08-27T02:00:09.397Z","response_time":76,"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":["react","react-component","video-player","vimeo","vimeo-player","youtube","youtube-player"],"created_at":"2024-10-01T15:35:48.590Z","updated_at":"2025-09-01T05:33:17.910Z","avatar_url":"https://github.com/ryanhefner.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-video-players\n\nA library of React video player components that share a similar interface and makes\nit easy to work with various video platforms (Vimeo, YouTube, etc.) and players,\nconsistently in your site or application.\n\n## Install\n\nVia [npm](https://npmjs.com/package/react-video-players):\n\n```sh\nnpm install --save react-video-players\n```\n\nVia [Yarn](https://yarn.fyi/react-video-players):\n\n```sh\nyarn add react-video-players\n```\n\n## Video Players\n\nThe goal of this library is to offer a variety of different player \"types\", while\nmaintaining a similar/common interface across each component. Currently, there\nare three video player components available: `VimeoPlayer`, `YouTubePlayer` and\n`VideoPlayer` (standard `\u003cvideo\u003e` tag implemenation).\n\nIn addition to the three components, this library also include the High Order Component\nthat the three players use, in the event you’d like to use that to build your own\nvideo player component.\n\n### Common Properties\n\n* `aspectRatio:String` - Used to calculate aspect ratio for the container so that\nvideo is displayed responsively.\n* `config:Object` - Optional config settings. See [VimeoPlayer Props](#props) or [YouTubePlayer Props](#props-1)\n* `controls:Element` - A React component that contains controls setup to control\nthe video. See [Player Controls](#player-controls)\n* `height:Number || String` - Height of the player. Default `100%`.\n* `loop:Boolean` - Whether or not the video should loop playback. Default `false`.\n* `play:Boolean` - Whether or not the video should play on load. Default `false`.\n* `time:Number` - Time to play when the player loads, or seek time if the player is already loaded. Default `0`.\n* `width:Number || String` - Width of the player. Default `100%`.\n\n### Callbacks\n\n* `onEnded:Function` - Callback when video playback has ended.\n* `onError:Function` - Callback when an error occurs within the player.\n* `onPause:Function` - Callback when video player is paused.\n* `onPlay:Function` - Callback when video player is played.\n* `onReady:Function` - Callback when video player is ready.\n* `onTimeUpdate:Function` - Callback when video player time updates.\n\n### Player Components\n\n#### `VimeoPlayer`\n\nThe `VimeoPlayer` component is a simple React wrapper around the standard Vimeo\nPlayer embed. For more informatin on how to work with the Vimeo Player directly,\ncheck out this repo, [@vimeo/player.js](https://github.com/vimeo/player.js), for\nmore info and examples.\n\nThe `VimeoPlayer` component offers limited control of the player via the `props`\non the component: `loop`, `play`, `time` and `volume`. I’m open to adding more\naccess to some of the other methods available on the player via props, but to\nkeep it simple I’ve started with these four.\n\n##### Props\n\n* `config:Object` - Options that are passed to the player on setup,\nAvailable [embedOptions](https://github.com/vimeo/player.js#embed-options).\n* `videoId:Number` - ID of the Vimeo video you'd like to load in the player.\n\n##### Example\n\n```js\nimport {VimeoPlayer} from 'react-video-players';\n\n...\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cVimeoPlayer videoId=\"225408543\" /\u003e\n      \u003c/div\u003e\n    );\n  }\n\n...\n\n```\n\n#### `YouTubePlayer`\n\nSimilar to the `VimeoPlayer` component, the `YouTubePlayer` component is a simple\nReact wrapper around the YouTube Player, allowing for basic control and configuration,\nallowing you to use it how you want within your React sites/applications.\n\n##### Props\n\n* `config:Object` - The `config` object is mapped to the `playerVars` property\nused when creating the player. Available [playerVars](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters).\n* `playlist:String` - An optional value that can be set when you would like to\nload a playlist into the player. This property is also set to the `videoId` when\nthe `loop` flag has been set on the player (which is required for the YouTube Player\nto loop the video).\n* `videoId:String` - String to the YouTube video ID you would like to load in the player.\n\n##### Example\n\n```js\nimport {YouTubePlayer} from 'react-video-players';\n\n...\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cYouTubePlayer videoId=\"8gXpZmQ7j70\" /\u003e\n      \u003c/div\u003e\n    );\n  }\n\n...\n\n```\n\n#### `VideoPlayer`\n\nJust your plain ole’ `\u003cvideo\u003e` tag, wrapped in a similar interface to the other\nplatform specific players. You could use this as is if you have direct access\nto video urls, or use it as a base for a more complex video player that you’re\nbuilding in React.\n\n##### Props\n\n* `config:Object` - An object containing the additional attributes that are available\nfor the `\u003cvideo\u003e` tag, but are not exposed via other props. (Ex. `controls`, `poster`, `preload`, etc.)\n* `src:String` - URL to video content.\n\n##### Example\n\n```js\nimport {VideoPlayer} from 'react-video-players';\n\n...\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cVideoPlayer src=\"[...your video source url...]\" /\u003e\n      \u003c/div\u003e\n    );\n  }\n\n...\n\n```\n\n### `playerController` (Higher Order Component)\n\nWant to build your own embeddable player using a different providers player? No problem 😎\n\nIncluded in this library is the a High Order Component that wraps all the players\nin this library, `playerController`. The `playerController` is responsible for\nwiring up the `controls`, along with handling some basic style and callback handling\nwithin video component instances so that we’re not repeating ourselves too much.\n\nFeel free to use the `playerController` to write your own React video players that\nwrap embeddable players from other video providers. Also, if you end up writing\na really awesome component for another provider, and you’d like to add it to this\nrepo, just make a PR with your additions and I’ll check’em out and merge them in\nas soon as I can.\n\n#### Example\n\n```js\nimport React, {Component} from 'react';\nimport {playerController} from 'react-video-players';\n\nclass YourRadVideoPlayer extends Component {\n\n...\n\n}\n...\n\nexport default playerController(YourRadVideoPlayer);\n\n```\n\n## Player Controls\n\nThe `controls` property on the video player components makes it easy to compose\ncontrols in context with the video player and provide a simple way to keep controls\nin sync with the video state, while also providing callbacks that can be used\nto control video playback.\n\n### Properties\n\n* `loop:Boolean` - Loop status of video\n* `play:Boolean` - Playing status of video\n* `time:Number` - Current time of video\n* `volume:Number` - Current volume of video\n\n### Callback\n\n* `onPause:Function` - Callback to pause video\n* `onPlay:Function` - Callback to play video\n* `onSeek:Function` - Callback to seek video\n* `onVolumeChange:Function` - Callback to change the volume of video\n\n## License\n\n[MIT](LICENSE) © [Ryan Hefner](https://www.ryanhefner.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanhefner%2Freact-video-players","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanhefner%2Freact-video-players","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanhefner%2Freact-video-players/lists"}