https://github.com/sanjay270899/custom-video-player

React Custom Video Player.
https://github.com/sanjay270899/custom-video-player

node-sass pexels-api reactjs video-player

Last synced: 8 months ago
JSON representation

React Custom Video Player.

• Host: GitHub
• URL: https://github.com/sanjay270899/custom-video-player
• Owner: sanjay270899
• License: mit
• Created: 2021-05-16T11:45:12.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2021-07-26T07:24:53.000Z (almost 5 years ago)
• Last Synced: 2025-03-28T08:51:12.525Z (about 1 year ago)
• Topics: node-sass, pexels-api, reactjs, video-player
• Language: JavaScript
• Homepage: https://player.prajapatisanjay.com
• Size: 673 KB
• Stars: 9
• Watchers: 1
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
![custom-video-player](https://socialify.git.ci/sanjay270899/custom-video-player/image?description=1&forks=1&issues=1&language=1&owner=1&pattern=Plus&pulls=1&stargazers=1&theme=Dark)

## About Project

I 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.

![image](https://user-images.githubusercontent.com/43892590/118876863-5c584680-b90b-11eb-863c-2c3abd38e4aa.png)

## Basic structure of the project repository 📂

```terminal

|

|- public             # Any files within this directory will not be processed by Webpack but copied directly to the build folder.

|- src:               # Contains all source code for the React application.

    |

    |- api

        |-pexels.js   # Axios configuration for PEXELS APIs.

    |- assets         # Contains icons and helper functions.

    |- components     # Contains all the components used within the app.

    |- pages          # Contains all the pages of the app.

        |- Home.js

    |- styles         # Contains sass files.

    |- App.js

    |- index.js

```

## Custom controls made till date:

- Play/Pause

- Replay/Forward 10 Seconds

- Volume

- Playback Speed

- Fullscreen

## Tech Stack



### Task:

Create a video player with custom controls like one below.

1. You can either have it play a YouTube video or local video (pick one of them).

2. When `hovering` over the video it should `show just the controls`.

3. When user `pauses` the video it should `show the title, channel name, video views and description of video (3 lines only)`.

4. The controls and details should auto hide after certain time.

5. Use emojis in your git commit message

- Clean code and structure is top priority.

![image](https://user-images.githubusercontent.com/43892590/118407372-1d718900-b69e-11eb-8027-c4734604ce75.png)

### Bonus points for:

These are just for you to try out, it wont be held against you if you decide to not do these.

- Showing a queue next to the player.

- Adding responsive layout for mobile.

- Adding option for user to load a playlist/video.