{"id":20499221,"url":"https://github.com/vikrantaroraa/javascript-video-player","last_synced_at":"2026-04-20T02:02:50.894Z","repository":{"id":235336836,"uuid":"636623007","full_name":"vikrantaroraa/javascript-video-player","owner":"vikrantaroraa","description":"📹 A simple video player made in React.js for the web.","archived":false,"fork":false,"pushed_at":"2023-05-11T11:55:17.000Z","size":883,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-16T06:58:02.130Z","etag":null,"topics":["component","javascript","library","player","react","react-component","video","video-player"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/js-video-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/vikrantaroraa.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,"dei":null}},"created_at":"2023-05-05T09:13:05.000Z","updated_at":"2024-10-10T19:26:46.000Z","dependencies_parsed_at":"2024-04-23T05:07:11.747Z","dependency_job_id":"814f8a40-7aac-42d0-afe2-2dd8095ceae5","html_url":"https://github.com/vikrantaroraa/javascript-video-player","commit_stats":null,"previous_names":["vikrantaroraa/javascript-video-player"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikrantaroraa%2Fjavascript-video-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikrantaroraa%2Fjavascript-video-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikrantaroraa%2Fjavascript-video-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikrantaroraa%2Fjavascript-video-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vikrantaroraa","download_url":"https://codeload.github.com/vikrantaroraa/javascript-video-player/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242089239,"owners_count":20069929,"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":["component","javascript","library","player","react","react-component","video","video-player"],"created_at":"2024-11-15T18:16:49.690Z","updated_at":"2026-04-20T02:02:45.874Z","avatar_url":"https://github.com/vikrantaroraa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# js-video-player\n\nA simple video player made in React.js for the web.\n\n## Installation\n\nInstall js-video-player with npm\n\n```bash\nnpm i js-video-player\n```\n\n## Usage\n\n```javascript\nimport { CustomVideoPlayer } from \"js-video-player\";\n\nfunction App() {\n  return \u003cCustomVideoPlayer /\u003e;\n}\n```\n\n## Props\n\n\u003e ### :memo: **Note**: All props are optional\n\n- `videoUrl` : string\n\n```\nThe link of the video that you want to play. By default the video player plays the video hosted at \"https://blog.addpipe.com/static/short.mp4\"\n```\n\n## controls container props\n\n- `controlsVariant` : string\n- `controlsContainerStyle` : object\n\n```\nThe `controlsVariant` prop only takes 2 values `bottom` and `top`. Passing 'top' will place the controls container at the top of video player. Its value is `bottom` by default.\n\nThe controls container is the part that you see at the bottom in the \u003cCustomVideoPlayer\u003e component. It contains all the controls i.e. play/pause button, progress bar, volume control and playback speed dropdown.\n```\n\n\u003e :memo: **Note:** Please note that passing anything other than `top` or `bottom` to `controlsVariant` prop will result in an error.\n\n## play and pause props\n\n- `UserPlayIcon` : ReactNode\n- `UserPauseIcon` : ReactNode\n- `playAndPauseStyle` : object\n\n```\nThe player comes with its own set of play and pause icons. If you want, you can also pass your own play and pause icons using `UserPlayIcon` and `UserPauseIcon` props.\n```\n\n\u003e :memo: **Note:** Please note that the props `UserPlayIcon` and `UserPauseIcon` start with capital letter U. This is because you will be passing a react node that can be directly used as a component.\n\n## video duration and progress bar props\n\n- `durationAndProgressBarStyle` : object\n- `videoDurationStyle` : object\n- `progressBarContainerStyle` : object\n- `progressBarStyle` : object\n\n## volume icon and range styles\n\n- `UserVolumeHighIcon`: ReactNode\n- `UserVolumeMuteIcon`: ReactNode\n- `volumeIconStyle` : object\n- `volumeRangeStyle` : object\n- `volumeIconAndRangeStyle` : object\n\n```\nThe player comes with its own set of volume and mute icons. If you want, you can also pass your own volume and mute icons using `UserVolumeHighIcon` and `UserVolumeMuteIcon` props.\n```\n\n\u003e :memo: **Note:** Please note that the props `UserVolumeHighIcon` and `UserVolumeMuteIcon` start with capital letter U. This is because you will be passing a react node that can be directly used as a component.\n\n## playback speed select props\n\n- `userPlaybackSpeedOptions`: Array of strings\n- `userDefaultSelectedSpeedOption` : string\n- `playbackSpeedSelectStyle` : object\n- `playbackSpeedSelectOptionsStyle` : object\n\n```\nThe player comes with its own set of playback speed options. If you want you can also pass your own playback speed options using `userPlaybackSpeedOptions` prop that takes an array of string values where each entry in the array is a playback speed option.\n\nThe prop `userDefaultSelectedSpeedOption` is used to determine the default selected option for the playback speed options array that the user provides. Since the video plays at normal speed after loading, the value of this prop should be normal or 1x or 1X or 1 depending on what is the normal speed passed in the options array in `userPlaybackSpeedOptions` prop.\n\nFor better understanding, see example below.\n```\n\n\u003e :memo: **Note:** As mentioned above the `userDefaultSelectedSpeedOption` prop is used to determine the default selected value for the playback speed options array that the user passes, therefore this becomes a necessary prop when `userPlaybackSpeedOptions` prop is used. If this prop is not passed, then after loading, the video will play at normal speed but the selected speed showing in the dropdown would be the first value in the `userPlaybackSpeedOptions` array.\n\n## passing props to `\u003cCustomVideoPlayer\u003e` component\n\n```javascript\nimport { CustomVideoPlayer } from \"js-video-player\";\n\nfunction App() {\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cCustomVideoPlayer\n        videoUrl={\n          \"https://blog.addpipe.com/static/the-web-is-always-changing.webm\"\n        }\n        controlsVariant={\"bottom\"}\n        controlsContainerStyle={{\n          opacity: 0.95,\n          height: 25,\n          gap: 5,\n          border: \"1px solid #01da72\",\n        }}\n        playAndPauseStyle={{\n          borderRadius: 2,\n          color: \"#fff\",\n          fontSize: 16,\n          height: \"100%\",\n          width: \"6%\",\n        }}\n        durationAndProgressBarStyle={{\n          height: \"100%\",\n          width: \"64%\",\n        }}\n        videoDurationStyle={{\n          color: \"#fff\",\n          fontSize: 12,\n          fontWeight: 600,\n        }}\n        progressBarContainerStyle={{\n          backgroundColor: \"#088a49\",\n          borderRadius: 5,\n          height: \"30%\",\n          padding: 2,\n        }}\n        progressBarStyle={{\n          backgroundColor: \"#fff\",\n          borderRadius: 5,\n        }}\n        volumeIconAndRangeStyle={{\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          height: \"100%\",\n          width: \"20%\",\n        }}\n        volumeIconStyle={{\n          color: \"white\",\n          width: \"100%\",\n        }}\n        volumeRangeStyle={{\n          accentColor: \"#fff\",\n        }}\n        userPlaybackSpeedOptions={[\n          \"0.25x\",\n          \"0.5x\",\n          \"0.75x\",\n          \"1x\",\n          \"1.25x\",\n          \"1.5x\",\n          \"1.75x\",\n          \"2x\",\n        ]}\n        userDefaultSelectedSpeedOption={\"1x\"}\n        playbackSpeedSelectStyle={{\n          border: \"1px solid #fff\",\n          borderRadius: 3.5,\n          color: \"#fff\",\n          fontSize: 13.3,\n          fontWeight: 500,\n          backgroundColor: \"rgba(0,0,0,0.2)\",\n          height: \"auto\",\n          width: \"10%\",\n        }}\n        playbackSpeedSelectOptionsStyle={{\n          color: \"#000\",\n          fontWeight: 400,\n        }}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvikrantaroraa%2Fjavascript-video-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvikrantaroraa%2Fjavascript-video-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvikrantaroraa%2Fjavascript-video-player/lists"}