manishekhawat / react-audio-video-player-visualization

Created a youtube video player clone in react

This is just a fun weekend project

Features achieved

Play/Pause

Mute

Volume Control

Time Progress - current vs total

Current Play progress in %

Caption Control

Speed Control 0.25x to 2x

Picture in Picture Mode

Theater Mode

Fullscreen Mode

Scrubbing and Preview

Preview Images generated using ffmpeg -i video.mp4 -vf fps=1/5,scale=120:-1 preview%d.jpg

Roadmap Items

Create Backend for Streaming video on this player

Refactor the code

Use Tailwind for CSS

Publish as npm package

Create Custom Audio Player

Create visualization of sound on both the players

Integrate Radio in the audio player

Credit: Reference from:

Web Dev Simplified

https://gist.github.com/CanPacis/99e079a55e8c8583ce0006ac8489d823

https://dev.to/franciscomendes10866/how-to-create-a-video-player-in-react-40jj