Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed Video player on hover #698

Closed
wants to merge 1 commit into from
Closed

Conversation

Dishant1804
Copy link

@Dishant1804 Dishant1804 commented May 23, 2024

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

HoverSeekBar.responsive.mp4

Checklist before requesting a review

  • I have performed a self-review of my code
  • I assure there is no similar/duplicate pull request regarding same issue

@Dishant1804 Dishant1804 reopened this May 23, 2024
@Dishant1804
Copy link
Author

@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

@Dishant1804 Dishant1804 changed the title hover video player Fixed Video player on hover May 23, 2024
@devsargam devsargam closed this Sep 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feature: Video Autoplay on Hover
2 participants