[Scrolltrigger to play back video is laggy]

Thanks for your replies – arghs… I was hoping for that silver bullet. But thanks for the background knowledge about h.264 and its decoding on more recent vs. older computers.

 

Should I maybe switch to *.webm for Firefox? Has someone compared it to *.mp4?

[Scrolltrigger to play back video is laggy]

Hi there,

 

I'm yet another person that tries to play back a video on scroll I already checked (this, this, this and this thread and copied lots of code from this nice example rendered below my post) but did not succeed in making my videy play back smoothly.

 

I created this sandbox to play around with it:

https://codesandbox.io/s/nostalgic-mopsa-nghmmm?file=/src/App.js

 

I encoded my video using the following command:

ffmpeg -y -i videoplayback.mp4 -vf scale=1600:-1 -movflags faststart -vcodec libx264 -crf 33 -g 1 -an -pix_fmt yuv420p test.mp4

The result is 50 seconds long and ~25MB of size.

 

My problem ⚠️:

Within the first 10-20 seconds of the visit on the page and on not-brand-new devices in general, the playback is far from smooth and has lags of several seconds. (My M1 is handling it all pretty well which makes debugging very hard.)

 

As others observed before me: Safari is no problem at all – working great. But Chrome and especially Firefox are nod good enough.

 

I'm so jealous of the NYTimes and their setup – it's working great. How could I improve the performance of my setup?
Do you have any ideas? Kind regards, Benja

(PS: Somehow the video in the codesandbox plays twice – I don't understand why. PSS: Using JPGs is not an option as they'd be 90MB total.)

See the Pen 9e810322d70c306de2d18237d0cb2d78?editors=0010 by shshaw (@shshaw) on CodePen