This is a custom video player application created using React and Tailwind. It has functionalities to play, pause, mute, unmute, seek, and change the speed of videos. Also playing order can be re-adjusted by dragging and dropping in playlist section. While the app works well on mobile, it's best experienced on desktop.
- Play, pause, and seek functionality for videos
- Adjust playback speed (0.5x, 1x, 1.5x, 2x)
- Mute/unmute audio
- Autoplay option (enabled by default)
- Drag and drop to reorder videos in the playlist
- Thumbnail previews for all videos in the playlist
- Search functionality in the playlist section
- No External Libraries: The app was developed without relying on external libraries for core functionalities. This includes drag and drop for reordering videos and implementing the video player. React's Context has been used to manage state in this application.
Live demo of the Video Player App here.
To run the application locally:
- Clone this repository.
- Install dependencies using
npm install. - Start the development server with
npm run dev. - Visit the prompted url and port in the browser .
The data for the videos are sourced from https://gist.github.com/jsturgis/3b19447b304616f18657