{"id":25936737,"url":"https://github.com/Experience-Monks/react-background-video-player","last_synced_at":"2025-03-04T02:45:33.351Z","repository":{"id":14954166,"uuid":"77349115","full_name":"Experience-Monks/react-background-video-player","owner":"Experience-Monks","description":"React background video component with simple player API","archived":false,"fork":false,"pushed_at":"2023-04-17T19:11:29.000Z","size":14941,"stargazers_count":57,"open_issues_count":10,"forks_count":15,"subscribers_count":32,"default_branch":"master","last_synced_at":"2025-02-26T01:32:26.587Z","etag":null,"topics":["background-video","react","react-component","react-components","reactjs","ui-components","video","video-player"],"latest_commit_sha":null,"homepage":"","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/Experience-Monks.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}},"created_at":"2016-12-26T01:06:44.000Z","updated_at":"2024-09-12T21:13:57.000Z","dependencies_parsed_at":"2023-01-11T18:56:40.132Z","dependency_job_id":null,"html_url":"https://github.com/Experience-Monks/react-background-video-player","commit_stats":null,"previous_names":["experience-monks/react-background-video-player","jam3/react-background-video-player"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Experience-Monks%2Freact-background-video-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Experience-Monks%2Freact-background-video-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Experience-Monks%2Freact-background-video-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Experience-Monks%2Freact-background-video-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Experience-Monks","download_url":"https://codeload.github.com/Experience-Monks/react-background-video-player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241773255,"owners_count":20018064,"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":["background-video","react","react-component","react-components","reactjs","ui-components","video","video-player"],"created_at":"2025-03-04T02:45:32.426Z","updated_at":"2025-03-04T02:45:33.346Z","avatar_url":"https://github.com/Experience-Monks.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-background-video-player\nReact background video component with simple player API. Supports inline play on iPhone.\n\n## Install\n```npm i react-background-video-player --save```\n\n## Test\nIn your terminal go to component folder and run ```npm t```\n\n## Component Props\n```javascript\n{\n  playsInline: PropTypes.bool,             // play inline on iPhone. avoid triggering native video player\n  disableBackgroundCover: PropTypes.bool,  // do not apply cover effect (e.g. disable it for specific screen resolution or aspect ratio)\n  style: PropTypes.object,\n  className: PropTypes.string,\n  containerWidth: PropTypes.number.isRequired,\n  containerHeight: PropTypes.number.isRequired,\n  src: PropTypes.oneOfType([\n    PropTypes.string, // single source\n    PropTypes.array   // multiple sources\n  ]).isRequired,\n  poster: PropTypes.string,\n  horizontalAlign: PropTypes.number,\n  verticalAlign: PropTypes.number,\n  preload: PropTypes.string,\n  muted: PropTypes.bool,   // required to be set to true for auto play on mobile in combination with 'autoPlay' option\n  loop: PropTypes.bool,\n  volume: PropTypes.number,\n  autoPlay: PropTypes.bool,\n  extraVideoElementProps: PropTypes.object,\n  startTime: PropTypes.number,\n  tabIndex: PropTypes.number,\n  onReady: PropTypes.func, // passes back `duration`\n  onPlay: PropTypes.func,\n  onPause: PropTypes.func,\n  onMute: PropTypes.func,\n  onUnmute: PropTypes.func,\n  onTimeUpdate: PropTypes.func, // passes back `currentTime`, `progress` and `duration`\n  onEnd: PropTypes.func,\n  onClick: PropTypes.func,\n  onKeyPress: PropTypes.func\n}\n```\n\n## Default Props\n```javascript\n{\n  playsInline: true,\n  disableBackgroundCover: false,\n  style: {},\n  className: '',\n  poster: '',\n  horizontalAlign: 0.5,\n  verticalAlign: 0.5,\n  preload: 'auto',\n  muted: true,\n  loop: true,\n  volume: 1,\n  autoPlay: true,\n  extraVideoElementProps: {},\n  startTime: 0,\n  tabIndex: 0,\n}\n```\n\n## API\n* ```play``` - play video\n* ```pause``` - pause video\n* ```togglePlay``` - automatically toggle play state based on current state\n* ```isPaused``` - get play state\n* ```mute``` - mute video\n* ```unmute``` - unmute video\n* ```toggleMute``` - automatically toggle mute state based on current state\n* ```isMuted``` - get mute state\n* ```setCurrentTime``` - seek in time\n\nAlso refer to [examples](https://github.com/Jam3/react-background-video-player/tree/master/test)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FExperience-Monks%2Freact-background-video-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FExperience-Monks%2Freact-background-video-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FExperience-Monks%2Freact-background-video-player/lists"}