如何使用ffmpeg使html5 webm视频平滑滚动

我使用了示例代码https://codepen.io/ollieRogers/pen/lfeLc https://codepen.io/ollieRogers/pen/lfeLc当用户滚动页面时显示（背景）视频的帧。

示例中使用的 webm 视频在我的代码中播放得非常流畅，但我的视频有点卡顿，所以我假设问题出在视频本身。

我使用 ffprobe 来看看是否可以区分两个视频之间的区别，但运气不佳。两者都有相似的比特率和长度，而且都是 30fps。

是否有推荐的方法来创建能够平滑“滚动”的 html5 视频文件，即能够快速响应 window.requestAnimationFrame() 调用？正确编码的 ffmpeg 命令会更好！

window.requestAnimationFrame(scrollPlay);

Thanks!

对于任何需要快速响应 window.requestAnimationFrame() 的 html5 视频的人来说，关键是要有足够的关键帧，这将使“随机访问”更快。 （我在 videohelp.com 论坛上获得了一些帮助。）

下面是一个示例 ffmpeg 命令，用于对 .mp4 视频进行编码，每 1/2 秒使用关键帧生成 30fps 视频。 （看https://trac.ffmpeg.org/wiki/Encode/H.264 https://trac.ffmpeg.org/wiki/Encode/H.264.)

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

下面是一个示例 ffmpeg 命令，用于对 VP8 .webm 视频进行编码，每 1/2 秒使用关键帧生成 30fps 视频。 （看https://trac.ffmpeg.org/wiki/Encode/VP8 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

注意：您不能简单地将关键帧“插入”到现有视频中。视频必须重新编码。