{"id":14384694,"url":"https://github.com/gradeup/react-flow-player","last_synced_at":"2025-08-23T17:33:24.827Z","repository":{"id":95947735,"uuid":"114288721","full_name":"gradeup/react-flow-player","owner":"gradeup","description":"React component for embeding flow player","archived":true,"fork":false,"pushed_at":"2019-05-23T13:24:49.000Z","size":117,"stargazers_count":35,"open_issues_count":8,"forks_count":15,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-12-12T08:12:26.654Z","etag":null,"topics":["flow-player","flowplayer","player","react","video-player"],"latest_commit_sha":null,"homepage":null,"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/gradeup.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":"2017-12-14T19:32:04.000Z","updated_at":"2023-01-28T18:16:28.000Z","dependencies_parsed_at":"2023-03-12T22:45:33.228Z","dependency_job_id":null,"html_url":"https://github.com/gradeup/react-flow-player","commit_stats":{"total_commits":65,"total_committers":9,"mean_commits":7.222222222222222,"dds":0.5538461538461539,"last_synced_commit":"a9b3e19e38429de3440c4c9b1b8df9ba201a5525"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gradeup%2Freact-flow-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gradeup%2Freact-flow-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gradeup%2Freact-flow-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gradeup%2Freact-flow-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gradeup","download_url":"https://codeload.github.com/gradeup/react-flow-player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230716617,"owners_count":18269807,"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":["flow-player","flowplayer","player","react","video-player"],"created_at":"2024-08-28T18:01:35.523Z","updated_at":"2024-12-21T12:30:52.038Z","avatar_url":"https://github.com/gradeup.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\n# The Project is no longer maintained. Please use an actively developed [fork](https://github.com/gradeup/react-flow-player/network/members) !!!\n \n\n# react-flow-player\n\n`\u003cReactFlowPlayer\u003e` is a React Component for integrating the flow player into your react app. Passing props to the component will configure the flow player and will embed the player into your app.\n\n## Installation\n\n```shell\nnpm install react-flow-player react react-dom prop-types\n```\n\n## Usage\n\n### Without Custom Buttons\n\n```javascript\nimport ReactFlowPlayer from \"react-flow-player\";\n\n\u003cReactFlowPlayer\n  playerInitScript=\"http://releases.flowplayer.org/7.2.1/flowplayer.min.js\"\n  playerId=\"reactFlowPlayer\"\n  sources={[\n    {\n      type: \"video/webm\",\n      src: \"http://edge.flowplayer.org/functional.webm\"\n    }\n  ]}\n/\u003e;\n```\n\n### With Custom Buttons\n\n```javascript\nimport ReactFlowPlayer from \"react-flow-player\";\n\n\u003cReactFlowPlayer\n  playerInitScript=\"http://releases.flowplayer.org/7.2.1/flowplayer.min.js\"\n  playerId=\"reactFlowPlayer\"\n  sources={[\n    {\n      type: \"video/webm\",\n      src: \"http://edge.flowplayer.org/functional.webm\"\n    }\n  ]}\n  customButton={[\n    {\n      component: \u003ca id=\"custom-btn\"\u003eCustom React Component\u003c/a\u003e,\n      class: \"fp-controls \u003e .fp-volume\",\n      id: \"custom-btn\",\n      place: \"before\"\n    }\n  ]}\n/\u003e;\n```\n\n## Required Props\n\nThere are some props that are required by the component :\n\n- `playerId` - Id used to look for the div container in which the flow player is embedded. - Type : **_String_**\n- `playerInitScript` - It is the url for the javascript code for the player setup that flowplayer community has provided. - Type : **_String_**\n- `sources` - It is the url and type for the video that is to be embedded into the flowplayer. - It can have multiple formats for the browser to detect and play the appropriate one. - Type : **_Array_** _(Array of objects)_\n\n## Optional Props\n\nThere are some props that are optional by the component :\n\n- `className` - It is the classes that is to be applied to the flowplayer embedded container. - Type : **_String_** - Default : **''**\n- `adaptiveRatio` - Whether the player should adapt to the video aspect ratio vertically. - Type : **_Boolean_** - Default : **false**\n- `aspectRatio` - It is the aspect ration for the video player recomended to be set as per the video's aspect ratio (Note : Both **:** and **/** separator can be used). - Type : **_String_** - Default : **'16:9'**\n- `autoplay` - Whether the video should play as soon as it is embedded. - Type : **_Boolean_** - Default : **false**\n- `bgcolor` - The background color of the player. - Type : **_String_** - Default : **'#2d3647'**\n- `title` - The title of the video to be displayed on the player. - Type : **_String_** - Default : **'Video'**\n- `description` - Descriptive text to show when hovering the player. - Type : **_String_** - Default : **'none'**\n- `muted` - Whether the player should start with sound turned off. - Type : **_Boolean_** - Default : **false**\n- `loop` - Whether the player should loop the current video. - Type : **_Boolean_** - Default : **false**\n- `preload` - Whether to preload the vido clip or its metadata. auto will attempt to load the complete video clip (careful: this might impose high bandwidth on page load usage even if user does nto start the video). - Type : **_String_** - Default : **'none'**\n- `fullscreen` - Whether the fullscreen is allowed or not. - Type : **_Boolean_** - Default : **true**\n- `keyboard` - Whether the keyboard shortcuts are allowed or not. - [Keyboard Shortcuts](https://flowplayer.com/docs/player/setup#keyboard) - Type : **_Boolean_** - Default : **true**\n- `live` - Whether the video which is embedded is live streaming video or not. - Type : **_Boolean_** - Default : **false**\n- `poster` - Url or path of the image of the poster that is to be displayed on the player. - Type : **_String_** - Default : **''**\n- `rtmp` - Rtmp configuration if the video is streamed using rtmp protocol. - String is the rtmp path of the streaming, for object configuration ([Configuration options](https://flowplayer.com/docs/player/setup#rtmp-options)) - Type : **_String_** or **_Object_** - Default : **''**\n- `speeds` - The array of values that is multiplied by the normal flow speed of the video. 1.0 being the normal. - Type : **_Array_** - Default : **[0.25, 0.5, 1.0, 1.5, 2.0]**\n- `volume` - The value of the initial volume of the video player. - Type : **_Number_** - Default : **1.0**\n- `hlsPlugin` - The value for the integrating of the hlsplugin when the HLS video streaming protocol is used. Note : Mandatory to be true when the hls protocol is used otherwise the player will be unable to play the video. - Type : **_Boolean_** - Default : **false**\n- `customButton` - The value makes the custom button that are required for different actions to be integrated on the flowplayer. - Type : **_Array_** - Default : **[]** - Value contains array of objects : - component : contains the react component which will be displayed on the flowplayer - class : Class that is present inside the flowplayer controls where the component is to be mounted - id : id for checking presence of the id that the component should have - place : 'before' (for inserting before the class specified) or default (for inserting after the class specified)\n- `seeking` - The seeking is the number of seconds by which the forward and backward works. - Type : **_Number_** - Default : **10**\n- `seekingText` - The seeking is the texts for the seeking icons on the player. - Type : **_String_** - Default : **'10'**\n- `onError` - The function that executes when there occurs an error while playing the video. - Type : **_Function_** - Default : **`() =\u003e {}`** - Parameters : - first is the event object - second is the flowplayer configured object - third is the error object\n- `onResume` - The function that executes when video playing resumes. - Type : **_Function_** - Default : **`() =\u003e {}`** - Parameters : - first is the event object - second is the flowplayer configured object\n- `speedPlugin` - The speedPlugin is the boolean value for adding speed streaming for supported formats. - Type : **_Boolean_** - Default : **false** - Rtmp doesn't support speed playing but hls does.\n- `hlsUrl` - The hlsUrl is used for specifying the versioned url for the hls plugin script. - Type : **_String_** - Default : **https://releases.flowplayer.org/hlsjs/flowplayer.hlsjs.light.min.js**\n- `speedUrl` - The speedUrl is used for specifying the versioned url for the speed plugin script. - Type : **_String_** - Default : **https://releases.flowplayer.org/speed-menu/flowplayer.speed-menu.min.js**\n- `styleUrl` - The styleUrl is used for specifying the versioned url for the stylesheet for the player's skin. - Type : **_String_** - Default : **https://releases.flowplayer.org/7.2.1/skin/skin.css**\n- `hlsConfig` - The hlsConfig is used for specifying whether the hls configuration script should be loaded or not for specifying hls js options. - Type : **_Boolean_** - Default : **false**\n- `hlsConfigUrl` - The hlsConfigUrl is used for specifying the versioned url for the hls configuration options. - Type : **_String_**\n- `licenseKey` - The licenseKey is used for specifying the license key of the commercial flowplayer. - Type : **_String_** - Default : **''**\n- `logo` - Used for specifying the logo string or object in commercial version. - String is the logo url, for object configuration ([Configuration options](https://flowplayer.com/docs/player/setup#logo-options)) - Type : **_String_** or **_Object_** - Default : **''**\n- `playerClasses` - classes to apply on video div\n- `analytics` - Google analytics ID ([documentation](https://flowplayer.com/docs/player/analytics)) - Type : **_String_** - Default : **''**\n- `seekFwHtml` - Seek Forward button Html\n- `seekBwHtml` - Seek Backward button Html\n- `getPlayerApi` - func to get flowplayer instance [api Obj](https://flowplayer.com/docs/player/api)\n- `hlsQualities` - [hlsQualities](https://flowplayer.com/docs/player/plugins#hlsjs) player option\n- `hlsjs` - [hlsjs](https://flowplayer.com/docs/player/setup#hls.js-configuration) configuration\n- `vodQualitySelectorPlugin` - The value for the integrating of the VOD Quality selector plugin when it's being used. - Type : **_Boolean_** - Default : **false**\n- `vodQualitySelectorSrc` - VOD quality selector plugin path [vodQualitySelectorSrc](https://flowplayer.com/docs/player/plugins.html#vod-quality-selector)\n- `qualities` - vod quality selector configuration [qualities](https://flowplayer.com/docs/player/plugins.html#vod-quality-selector-configuration)\n- `defaultQuality` - vod quality selector configuration [defaultQuality](https://flowplayer.com/docs/player/plugins.html#vod-quality-selector-configuration)\n- `vodQualities` - template based vod quality selector plugin configuration [vodQualities](http://demos.flowplayer.org/scripting/qsel.html)\n- `vastPlugin` - The value for the integration of the VAST advertisement plugin when it's being used. - Type : **_Boolean_** - Default : **false**\n- `vastPluginSrc` - VAST advertisement plugin path. Note: This link is different for each authorized domain. Check [prerequisites](https://flowplayer.com/docs/player/vast#prerequisites) - Type : **_String_**\n- `vastIMASDKSrc` - VAST IMA SDK path. You shouldn't need to change this.\n- `vastConfig` - VAST plugin configuration [object](https://flowplayer.com/docs/player/vast#configuration-options)\n\n## Links\n\nYou can visit some links for reference:\n\n- [React](https://reactjs.org/)\n- [Flow Player Setup Options](https://flowplayer.com/docs/player/setup)\n- [Github Link For Repo](https://github.com/gradeup/react-flow-player)\n- [Npm Link for the module](https://www.npmjs.com/package/react-flow-player)\n\n## Organisation\n\n[![Gradeup](https://gs-post-images.grdp.co/2017/2/img1486706448140-41-rs-high-webp.png)](https://gradeup.co)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgradeup%2Freact-flow-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgradeup%2Freact-flow-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgradeup%2Freact-flow-player/lists"}