In this post, we’ll take a look at how we can “scrub” a video while scrolling. Apple popularized this neat interactive effect with their Mac Pro product page. The product page uses a variety of CSS and JS to help power its animations, but the main attraction is the video of the Mac Pro in the center of view. Notice that as you scroll, the video will play whenever you scroll and then pauses whenever you stop scrolling. Neat right?
I thought the scroll scrubbing effect was really cool, so I made a demo that replicates it. Check it out below:
See the Pen How to scrub a video while scrolling (with unmodified video) by ozywuli (@ozywuli) on CodePen.
But wait, something’s wrong. When you scroll, the video does indeed play, but the progress isn’t smooth and jerks from frame to frame. The issue here is that the MP4 video file needs to be optimized for faster streaming and seeking. But how? One method (and the only method I know) is to through a command line tool called FFmpeg. It’s a nifty tool for manipulating video, audio, and other multimedia files. The downside is that since it’s developed for the command line, you have to be comfortable with using the command line. If you don’t already have FFmpeg installed, then do so now. Here is my recommended guide for installing FFmpeg on Mac OSX.
Once you’ve installed FFmpeg, then run the following command to convert your MP4 into a quick seeking video:
// "input.mp4" is the name of the original video. "output.mp4" is the name of the optimized video ffmpeg -i input.mp4 -c:v libx264 -profile:v baseline -x264opts keyint=3:min-keyint=2 -movflags +faststart+rtphint output.mp4
Plug in the optimized video and then, bam, we’ve got a smooth scrolling video: