Jump to content
Search Community

Scrolltrigger to play back video is laggy

benjazehr test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

3 hours ago, benjazehr said:

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

 

Yeah, this certainly doesn't sound at all related to GSAP - it's almost surely due to a combination of the work that the device is doing to download and render the video, plus the fact that many modern devices have dedicated chips (hardware) for decoding MP4 videos. The devices that are chugging are probably just choking on all the work they've gotta do (loading, decompressing, rendering, etc.) I know that video playback smoothness while scrubbing is HIGHLY dependent on how you encode your video, how often you've got keyframes embedded, etc. 

 

I wish I had a silver bullet for you!

 

As for the "plays twice" thing, I wonder if that's the new React 18 behavior in strict mode that causes all your useEffect()s to get double-called. I'd recommend tossing some console.log() calls in there to see what's happening and make sure you're doing cleanup tasks properly. I'd definitely recommend checking out the new gsap.context() method too - it can be super helpful in the React world. 

 

Good luck! 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • 8 months later...
On 8/31/2022 at 5:11 PM, Cassie said:

How the video is optimised and encoded is the most important thing - this is the magic incantation

ffmpeg -i input.mp4 -movflags faststart -vcodec libx264 -crf 23 -g 1 -pix_fmt yuv420p output.mp4

How to encode these formats into a video? I would like to do in a video of mine.

Link to comment
Share on other sites

  • 3 weeks later...
On 8/31/2022 at 8:21 PM, benjazehr said:

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

Hey, can you please tell me how did you encoded your video using ffmpeg in your M1.

I am unable to run the ffmpeg software on my M1 laptop bcoz ffmpeg is not made for m1 laptops and maybe rosetta is not able to handle it properly.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...