2

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!

ScottyB
  • 2,167
  • 1
  • 30
  • 46
  • do you have a sample of your video with the issue? would be interesting to compare – Offbeatmammal Jul 23 '18 at 07:32
  • Note that this webm file was created with: ffmpeg -i pencils.MOV -vcodec libvpx -acodec libvorbis output.webm – ScottyB Jul 23 '18 at 22:05
  • @Offbeatmammal, the following video is a good example, created with the ffmpeg command above against an iPhone MOV video: https://s3-us-west-2.amazonaws.com/tempwebm.bucket/output.webm?X-Amz-Content-Sha256=e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAJL7MK5F5I352CPSA%2F20180723%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20180723T231352Z&X-Amz-SignedHeaders=Host&X-Amz-Expires=360000&X-Amz-Signature=60c2f6f7bcf00bd6eb7739e2e48f9d9a6c148b6c7c65c1bd1ee2e70e475c7d76 – ScottyB Jul 23 '18 at 23:15
  • Here's the "good" video hosted from the same server where scrolling is smooth: https://s3-us-west-2.amazonaws.com/tempwebm.bucket/Chrome_ImF.webm?X-Amz-Content-Sha256=e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAJL7MK5F5I352CPSA%2F20180723%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20180723T233417Z&X-Amz-SignedHeaders=Host&X-Amz-Expires=360000&X-Amz-Signature=9acec5685bcadb711c25cd865bf0409dea8ff160ebbcba226800803831ff2ea2 – ScottyB Jul 23 '18 at 23:35
  • biggest difference I notice is the frame size (the 'good' version is 640x360) so the frames will load quicker and smoother, also the 'good' version is 30+s vs 4s, so there are much fewer frames to scroll through in the source (quality between the versions is also pretty marked). I tried a quick sample with a BigBuckBunny clip and it seems to play better – Offbeatmammal Jul 24 '18 at 01:14
  • Thanks @Offbeatmammal. I reduced the frame size of the video here. It's better, but still stutters noticeably: https://s3-us-west-2.amazonaws.com/tempwebm.bucket/output2.webm?X-Amz-Content-Sha256=e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAJL7MK5F5I352CPSA%2F20180724%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20180724T013756Z&X-Amz-SignedHeaders=Host&X-Amz-Expires=360000&X-Amz-Signature=16fda131f287045df021d3f7e547b0772246e8dce94f7f6b0e1a21d33cbbb806 – ScottyB Jul 24 '18 at 01:39
  • There is a discussion about "fragmentation" here which may be part of the solution I'm looking for: https://stackoverflow.com/questions/8616855/how-to-output-fragmented-mp4-with-ffmpeg Maybe @vbence can help? :) – ScottyB Jul 24 '18 at 01:41

1 Answers1

4

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.

ScottyB
  • 2,167
  • 1
  • 30
  • 46