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

Laggy and Jumpy Video Seeking in Video.js Component #8518

Open
rohith5429 opened this issue Dec 13, 2023 · 6 comments
Open

Laggy and Jumpy Video Seeking in Video.js Component #8518

rohith5429 opened this issue Dec 13, 2023 · 6 comments
Labels
needs: triage This issue needs to be reviewed

Comments

@rohith5429
Copy link

Description

When attempting to seek through the video using the Video.js component, the behavior is not smooth. The seeking process is characterized by significant lag and jumpiness, making it challenging for users to navigate through the video content seamlessly.

Reduced test case

https://codepen.io/gkatsev/pen/GwZegv?editors=1000

Steps to reproduce

1.Attempt to seek through the video using progressbar, moving the video back and forth.

Errors

No response

What version of Video.js are you using?

8.6.1

Video.js plugins used.

none

What browser(s) including version(s) does this occur with?

firefox v 119, chrome

What OS(es) and version(s) does this occur with?

windows 11

@rohith5429 rohith5429 added the needs: triage This issue needs to be reviewed label Dec 13, 2023
Copy link

welcome bot commented Dec 13, 2023

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

@amtins
Copy link
Contributor

amtins commented Dec 13, 2023

@rohith5429 I've created a PR to add this feature, please see #8287. A workaround is available here #8283 (comment)

@rohith5429
Copy link
Author

rohith5429 commented Dec 14, 2023

@amtins, I made a build dist out of your respo amtins:feat/seek-bar-smooth-seeking and replaced it in my node_modules/videojs dist.
and added enableSmoothSeeking: true option to videojs in my angular application,
this.video = videojs(this.videoElement.nativeElement, {enableSmoothSeeking: true});
However, it's still jumpy. Could you please help?

Screencast.from.14-12-23.10.53.08.AM.IST.webm

@amtins
Copy link
Contributor

amtins commented Dec 14, 2023

@rohith5429 do you have this problem with any video, or just this one? Have you tried another video? To make sure it's not a media-related problem.

What does player.seekable() return?

@rohith5429
Copy link
Author

rohith5429 commented Dec 14, 2023

I received TimeRanges { length: 1 } from video.seekable(). I also tried other videos, but encountered the same result.

When I tested the same video with the HTML5 video player, the seek bar was very smooth. However, all of my code logics and features are written based on video.js, so switching back to the HTML5 video player is not an option.

Screencast.from.14-12-23.05.40.52.PM.IST.webm

I would appreciate it if the video progress bar could exhibit a smoother behavior, ideally following the mouse movements seamlessly. Thank you for your consideration.

@oncul
Copy link

oncul commented Apr 16, 2024

I think its not a video.js bug. Its about video encoding settings. You can re-encode videos with "lower key frame distance/interval" (like 6, usually default is: 72) you would get smooth seeking. You can do it by ffmpeg or in premier pro render settings.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs: triage This issue needs to be reviewed
Projects
None yet
Development

No branches or pull requests

3 participants