custom-video-player

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.

Basic structure of the project repository 📂

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

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.