Video is lagging when using currentTime

Question

I have a simple HTML page and I play a video on the page. I use the scrollbar as the seekbar. In other words, video plays as long as the user scrolls.

I've seen this effect used in couple places and wanted to create it myself. The script I wrote is fully functioning, but there's a small problem: the video itself.

The videos from the examples run smoothly, but the videos that I created, they lag. I can't seem to figure out the cause. I've tried different combination of FPS, resolution, bit rate, but they didn't help.

The only difference among the videos that I could find is when I play the videos from the examples, I can seek any frame on MPC (K-Lite). I can seek only 3-4 frames on the videos that I've created. So the problem might be related to that. I'm not sure. If it's about that, I need a way to make the videos fully seekable. How do I do that?

https://akinuri.github.io/sticky-scrollable-video/ (online demo)
https://github.com/akinuri/sticky-scrollable-video (repo, check for details)
https://www.audi.com.tr/tr/web/tr/modeller/a8/a8-l.html (sticky scrollable video)
codepen.io/ollieRogers/pen/lfeLc (scrollable video)

Online demo plays the smooth/seekable video (from Audi). To see the difference between videos, you have to download the project from GitHub. Two videos (Audi and Chrome_ImF.ogv) are smooth/seekable. Other two (Chrome_icon, bedroom.mp4) are problematic/lags (only few frames are seekable).

---

_{Chrome/Opera produces smoother playback than Firefox. I'm using Premiere Pro for the videos.}

_{Edit: While the linked question talks about the same problem, I can't mark my question as a duplicate of it. Why? It's 3 years old, has only 1 answer, the answer isn't accepted, and it is poor. Video editing isn't my main occupation, so I can't make a direct inference from an answer. Answers should be given elaborately. My Q/A is more detailed. So I doubt that anyone viewing both questions would prefer the old one to this.}

Answer 1

The problem is indeed about seekability. I've found another question related to this problem and it made me look into key frames a little deeper.

I was looking for a way to modify the key frames (in Premiere Pro) and I found it in

Export Settings (CTRL+M) -> Video -> Advanced Settings -> Key Frame Distance

The keyframe distance is the maximum number of frames before the encoder inserts an i-frame,...

^{https://forums.adobe.com/message/9451877#9451877}

This setting was not ticked, and was set to 72. So depending on the FPS, it equals to 1-2 seconds. To make all the frames seekable, I've set this to 1 and it worked.

Update: It turns out that playing videos with low KFD on mobile (Chrome, Samsung Internet) is problematic. While StickyScrollableVideo can play the video (using currentTime), it is laggy. On the other hand, video.play() fails. Video just doesn't play. So instead of using StickyScrollableVideo on mobile, I'll disable it and just play the video. And to be able to do that, I need a version of the video with a higher KFD. So I prepared two videos; one with KFD:1 for desktop/StickyScrollableVideo, and other with KFD:25 (FPS) for mobile/video.play().

Issue can be seen here: https://akinuri.github.io/in-view-tracker/video.html

First video is with KFD:1, and the second is KFD:25. Tap on videos to play/pause.