Skip to content

vidyo-ai/frontend-internship-assignment

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Frontend Internship Assignment

Use ReactJS to create a Video Player using HTML5 Canvas or a Canvas library of your choice.

Prerequisite: Use of HTML5 Canvas is a must.

Part 1:

  1. Take video file as an input.
  2. Display video metadata including duration on UI.
  3. Display video on the screen after the user has selected the file using canvas element. Add play/pause button in the middle of the video container and it must play/pause on clicking.

Part 2:

  1. Detect if video has audio or not, do not allow the upload if the audio is not present.
  2. Display the waveform for the audio in a box below it, refer diagram.

Note that:

  • Source code must be shared with GitHub
  • Code must be hosted somewhere i.e. Vercel/Netlify

Useful Resources

  1. https://reactjs.org/tutorial/tutorial.html
  2. https://www.w3schools.com/html/html5_canvas.asp
  3. https://wavesurfer.xyz/

Once you are done please send code github link as well as netlify/vercel link to sourabh@vidyo.ai

Please find rough wireframe below, you are free to change it though.

wireframe

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published