Laggy and Jumpy Video Seeking in Video.js Component

[rohith5429]

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

[welcome[bot]]

👋 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]

@rohith5429 I've created a PR to add this feature, please see #8287. A workaround is available here https://github.com/videojs/video.js/issues/8283#issuecomment-1553269843

[rohith5429]

@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]

@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]

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]

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.