This is the solution for the Vidyo.ai Frontend Internship Assignment.
- Upload Video: 📁 Accepts a video file as input.
- Display Metadata: 📋 Shows video metadata, including duration, on the UI.
- Play/Pause Button: ⏯ Adds a play/pause button in the middle of the video container. Clicking toggles play/pause.
- Audio Detection: 🔊 Checks if the video has audio; prevents upload if audio is absent.
- Waveform Display: 🌊 Displays the audio waveform below the video.
- HTML Canvas
- CSS
- React.JS
- Wavesurfer Library
Live Demo: VideoPlayer Canvas