I implement a video background that plays by scroll, based on this pen: Original
I changed only the video URL, and with my video, the transition on the scroll is not smooth: My video
<source type="video/mp4" src="https://staging-datagen.kinsta.cloud/app/uploads/2022/05/DG_Full_Scroll_noScreen-1-1.mp4"></source>
I tried many things (changing the format, resizing the resolution, and lowering the quality of the video) none of them worked.
Do you have any idea why it is happening?
Using ffprobe I saw that in the entire 10 sec clip (300 frames) of our animation there are only 2 keyframes. This is strange since usually keyframes will be set every 90 frames or so by default. In the Google Chrome logo clip for example, there are 41 keyframes in the 31 second clip.
Converting our video with reduced key frame distance to every 5 frames - solved the problem!
https://staging-datagen.kinsta.cloud/app/uploads/2022/05/DG_Full_Scroll_noScreen-1-1_kfd5.mp4