code100x
Fixed Video player on hover
PR Fixes:
- 1 Added a responsive and dragable seek bar on hover while playing the video on hover.
- 2 Added the timeout so that the video loads on hover only when mouse is on the videothumbnail for a while(700 milliseconds).
- 3 Supports various file formats
Description
-This PR uses Video.Js library which is already being used to play the video in main videoPlayer, i have tweaked it such a way that only seekBar is visible along with the time elapsed, and it is responsive so that the user can skim through it to check what the content is. -I have also added a timeout to the hover so that the video takes a very small fraction of time to load when the mouse is over it. This is done because in the current app.100xdevs.com site when we try to navigate the mouse pointer the hover triggers immediately resulting in too many calls.
Resolves #480
The issue 480 was reopened to support various video formats, and this issue was linked to PR 651 which was closed because the code was very dependent on the new external library that was not used before.
I have fixed the above issue in this PR. Here is the demo video of the fix
https://github.com/code100x/cms/assets/115367435/f8c343dc-e1e9-4992-8db4-dd5dc0653c52
Checklist before requesting a review
- [x] I have performed a self-review of my code
- [x] I assure there is no similar/duplicate pull request regarding same issue
@hkirat do checkout this fix, this is my first PR to cms repo :) Happy to get feedback and make changes/improvise the code if need be