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

Question

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

示例中使用的webm视频在我的代码中播放非常流畅，但是我的视频断断续续，所以我假设问题出在视频本身。

我用ffprobe看看我能不能顺利地分辨出两个视频之间的区别。两者的比特率和长度相似，均为30fps。

是否存在创建html5视频文件的推荐方法，该文件将“平滑滚动”，即将对window.requestAnimationFrame（）调用做出快速响应？ ffmpeg命令正确编码会更好！

window.requestAnimationFrame(scrollPlay);

谢谢！

Answer 1

对于需要快速响应window.requestAnimationFrame（）的html5视频的其他人，关键是要确保有足够多的关键帧可以使“随机访问”更快。 （我在videohelp.com论坛上获得了一些帮助。）

这是一个示例ffmpeg命令，用于每隔1/2秒对关键帧的.mp4视频进行编码，以生成30fps的视频。 （请参见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命令，用于以每1/2秒的关键帧编码VP8 .webm视频的速度为30fps。 （请参见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

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