How to generate snapshot while hovering on video progress bar | React | JS
The following video is about how to generate snapshot while hovering on video progress bar for the particular second we hover at. I decided to implement something similar to the YouTube video player after understanding how it works. Towards the end of the video there's a bonus feature added where upon hovering on the video, the progress bar hides or makes itself visible depending on our cursor behaviour.
Github repo: https://github.com/xplodivity/video-s...
html canvas: https://www.w3schools.com/graphics/ca...
drawImage canvas: https://www.w3schools.com/graphics/ca...
HTML dom reference properties (event): https://www.w3schools.com/jsref/event...
0:00 - Intro
0:46 - Adding heading text and background styles
5:04 - Adding video element
8:24 - Explaining the approach
11:42 - removing default progress bar
12:48 - Building custom progress bar
21:09 - setting up references and adding functionality for progress bar and video
41:35 - creating snapshot element and generating image using canvas
1:12:01 - writing function to convert seconds into proper time format
1:17:50 - Bonus feature: hiding/showing progress bar based on different mouse movements
1:28:45 - End