How do I make the play progress transition smoother for VideoJS plugin?

[mawenmaywin]

I am trying to make the play progress transition smoother for VideoJS plugin. I've tried to edit the CSS but it causes a delay when the video is paused or stopped. Please help.

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

1. Play a short video that's about 5 seconds long.
2. You will notice that the slider is jumpy.
3. If you play a video on Youtube it is smooth even if it is a short video.

I am using the latest version of VideoJS.

[gkatsev]

Yeah, it's something we'd like to improve. We probably need to cancel the old animation and switch to animating to the new position each time the time changes.
Help in this area would be greatly appreciated.

[mawenmaywin]

Thanks for the reply. I was really hoping someone already found a way to do it. I've tried to edit the Javascript code myself, but with no luck. Help in this area would indeed be greatly appreciated.

[vhmth]

Seems like it wouldn't be that we cancel the old animation @gkatsev. Looking here:

https://github.com/videojs/video.js/blob/master/src/js/control-bar/progress-control/seek-bar.js#L37

It seems like we update the seekbar on timeupdate and ended and throttle to be called at most once every 50ms. We need to do ~ 15ms if we want 60fps. Calling update on the SeekBar is directly tied to updating the PlayProgressBar:

https://github.com/videojs/video.js/blob/master/src/js/control-bar/progress-control/play-progress-bar.js#L42

However, I can't find anywhere where we actually update the width of the PlayProgressBar. Could y'all help me find that?

[vhmth]

Nevermind I ended up changing that throttle time but it's not doing much. I think it's because the function itself is called on timeupdate, which isn't called 60 times a second. We have to set an interval on play and clear it on pause and ended. Tested locally and that seems to do it.

[apurvgandhwani]

Was this solved? @gkatsev Please let us know. Because we are still not able to implement it.

[brandonocasey]

I think this was solved by: #4591 which has been in every version since 6.5.0. The progress bar is updated at 60fps.

[apurvgandhwani]

Still it is jumpy.

…

On Fri, Aug 24, 2018 at 8:29 PM Brandon Casey ***@***.***> wrote: I think this was solved by: #4591 <#4591> which has been in every version since 6.5.0. The progress bar is updated at 60fps. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#4526 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AG-C2UPooq-Ot-zGmhW9v4wdCOaSUDjjks5uUBTmgaJpZM4Ol_MP> .

[gkatsev]

Jumpy how? Can you provide a gif or video of how it looks and a reduced test case? How does it look to you videojs.com? Would be good if you could fill out our issue template.

[vhmth]

@brandonocasey the progress bar updates at ~ 33 fps (just to clarify).

@apurvgandhwani what version of video.js are you using?

[apurvgandhwani]

Yes I want it to update at every frame. That is how I can make it's movement smooth even on 5 sec video. Even on 33 fps, it will look jumpy.

…

On Sat, Aug 25, 2018, 8:26 AM Vinay ***@***.***> wrote: @brandonocasey <https://github.com/BrandonOCasey> the progress bar updates at ~ 33 fps (just to clarify). @apurvgandhwani <https://github.com/apurvgandhwani> what version of video.js are you using? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#4526 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AG-C2f-qI8r14dRwgynlNUdC-kfgPUoGks5uULzIgaJpZM4Ol_MP> .