{"id":15041639,"url":"https://github.com/sanjay270899/custom-video-player","last_synced_at":"2025-10-05T06:51:50.502Z","repository":{"id":51307410,"uuid":"367864459","full_name":"sanjay270899/custom-video-player","owner":"sanjay270899","description":"React Custom Video Player.","archived":false,"fork":false,"pushed_at":"2021-07-26T07:24:53.000Z","size":689,"stargazers_count":9,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T08:51:12.525Z","etag":null,"topics":["node-sass","pexels-api","reactjs","video-player"],"latest_commit_sha":null,"homepage":"https://player.prajapatisanjay.com","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/sanjay270899.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":"2021-05-16T11:45:12.000Z","updated_at":"2025-01-04T16:36:49.000Z","dependencies_parsed_at":"2022-09-10T14:41:00.125Z","dependency_job_id":null,"html_url":"https://github.com/sanjay270899/custom-video-player","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanjay270899%2Fcustom-video-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanjay270899%2Fcustom-video-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanjay270899%2Fcustom-video-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanjay270899%2Fcustom-video-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sanjay270899","download_url":"https://codeload.github.com/sanjay270899/custom-video-player/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248956025,"owners_count":21189275,"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":["node-sass","pexels-api","reactjs","video-player"],"created_at":"2024-09-24T20:46:19.085Z","updated_at":"2025-10-05T06:51:50.440Z","avatar_url":"https://github.com/sanjay270899.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![custom-video-player](https://socialify.git.ci/sanjay270899/custom-video-player/image?description=1\u0026forks=1\u0026issues=1\u0026language=1\u0026owner=1\u0026pattern=Plus\u0026pulls=1\u0026stargazers=1\u0026theme=Dark)\n\n## About Project\n\nI have built a react video player with custom controls. One can search and add videos by a key word. All fetched videos will be shown in video queue.\n\n![image](https://user-images.githubusercontent.com/43892590/118876863-5c584680-b90b-11eb-863c-2c3abd38e4aa.png)\n\n## Basic structure of the project repository 📂\n\n```terminal\n|\n|- public             # Any files within this directory will not be processed by Webpack but copied directly to the build folder.\n|- src:               # Contains all source code for the React application.\n    |\n    |- api\n        |-pexels.js   # Axios configuration for PEXELS APIs.\n    |- assets         # Contains icons and helper functions.\n    |- components     # Contains all the components used within the app.\n    |- pages          # Contains all the pages of the app.\n        |- Home.js\n    |- styles         # Contains sass files.\n    |- App.js\n    |- index.js\n```\n\n## Custom controls made till date:\n\n- Play/Pause\n- Replay/Forward 10 Seconds\n- Volume\n- Playback Speed\n- Fullscreen\n\n## Tech Stack\n\n\u003cimg alt=\"React\" src=\"https://img.shields.io/badge/react%20-%2320232a.svg?\u0026style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB\"/\u003e\u003cimg alt=\"HTML5\" src=\"https://img.shields.io/badge/html5%20-%23E34F26.svg?\u0026style=for-the-badge\u0026logo=html5\u0026logoColor=white\"/\u003e\u003cimg alt=\"React\" src=\"https://img.shields.io/badge/Sass-CC6699?style=for-the-badge\u0026logo=sass\u0026logoColor=white\"\u003e\u003cimg alt=\"PEXELS\" src=\"https://user-images.githubusercontent.com/43892590/118880854-f9b57980-b90f-11eb-97dc-80c6e804e2b1.png\" height=\"35px\"/\u003e\n\n### Task:\n\nCreate a video player with custom controls like one below.\n\n1. You can either have it play a YouTube video or local video (pick one of them).\n2. When `hovering` over the video it should `show just the controls`.\n3. When user `pauses` the video it should `show the title, channel name, video views and description of video (3 lines only)`.\n4. The controls and details should auto hide after certain time.\n5. Use emojis in your git commit message\n\n- Clean code and structure is top priority.\n\n![image](https://user-images.githubusercontent.com/43892590/118407372-1d718900-b69e-11eb-8027-c4734604ce75.png)\n\n### Bonus points for:\n\nThese are just for you to try out, it wont be held against you if you decide to not do these.\n\n- Showing a queue next to the player.\n- Adding responsive layout for mobile.\n- Adding option for user to load a playlist/video.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanjay270899%2Fcustom-video-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsanjay270899%2Fcustom-video-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanjay270899%2Fcustom-video-player/lists"}