benjazehr

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?

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