CODEWITHSUNDEEP
htmlvideo
ScottyB
ScottyB

Reputation: 2497

How to use ffmpeg to make an html5 webm video scroll smoothly

I used the sample code at https://codepen.io/ollieRogers/pen/lfeLc to show frames of a (background) video as the user scrolls the page.

The webm video used in the sample plays very smoothly with my code, but my video stutters quite a bit, so I'm assuming the problem is with the video itself.

I've used ffprobe to see if I can tell the difference between the two videos with no luck. Both have similar bit rates and lengths, and they're both 30fps.

Is there a recommended way to create html5 video files that will "scroll" smoothly, i.e, that will respond quickly to the window.requestAnimationFrame() call? An ffmpeg command to encode correctly would be even better!

window.requestAnimationFrame(scrollPlay);

Thanks!

Upvotes: 2

Views: 2464

Answers (1)

ScottyB
ScottyB

Reputation: 2497

For anyone else who needs html5 videos that responds to window.requestAnimationFrame() quickly, the key is making there are plenty of keyframes which will make "random access" much faster. (I got some help over at videohelp.com forums.)

Here's a sample ffmpeg command to encode a .mp4 video with keyframes every 1/2 second for a 30fps video. (See https://trac.ffmpeg.org/wiki/Encode/H.264.)

ffmpeg -i inputVideo -c:v libx264 -preset slow -crf 22 -x264-params keyint=15 outputVideo.mp4

Here's a sample ffmpeg command to encode a VP8 .webm video with keyframes every 1/2 second for a 30fps video. (See https://trac.ffmpeg.org/wiki/Encode/VP8.)

ffmpeg -i inputVideo -c:v libvpx -crf 4 -b:v 1200K -keyint_min 15 -g 15 -f webm -dash 0 outputVideo.webm

Note: You can't simply "insert" keyframes into an existing video. The video has to be re-encoded.

Upvotes: 5

Related Questions