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 bination 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?

/ (online demo)
(repo, check for details)
.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.}

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 bination 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./akinuri/sticky-scrollable-video (repo, check for details)
https://www.audi..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.}

• javascript
• html
• video

Share Improve this question Follow edited Apr 23, 2019 at 13:43 akinuri asked Apr 22, 2019 at 13:49 akinuriakinuri 12.1k1010 gold badges7575 silver badges107107 bronze badges 1

• Possible duplicate of Setting currentTime for HTML5 video window.onscroll is lagging – Mike 'Pomax' Kamermans Commented Apr 22, 2019 at 14:26

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 12

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./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.

You must know root of this bug is CPU usage for plete page work (your video staff + all other job). In your example look like video encoder (mp4) bug. To make full response for all browsers you need both (safari,firefox,chrome) video format.

• One way is theory: Use web workers (new thread) to play video and navigate from code.

• Second is drawing video blob direct in canvas2d. In canvas program you can easy void to the current frame.

  Did you try on other (better) puter with similar environment and same browser version?

This will fix you problem 50%. Just conver mp4 to the ogg ( .ogv ) format

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>