如何使用ffmpeg使html5 webm视频平滑滚动 [英] How to use ffmpeg to make an html5 webm video scroll smoothly

问题描述

我在 https://codepen.io/ollieRogers/pen/lfeLc在用户滚动页面时显示(背景)视频的帧.

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.

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

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.

我已经用ffprobe看看我能否在没有运气的情况下分辨出两个视频之间的区别.两者的比特率和长度都差不多，均为30fps.

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.

是否存在创建html5视频文件的推荐方法，这些文件可以平滑滚动"，即可以快速响应window.requestAnimationFrame()调用?ffmpeg命令正确编码会更好！

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);

谢谢！

推荐答案

对于需要快速响应window.requestAnimationFrame()的html5视频的其他人，关键是要使大量的关键帧成为随机访问"快多了.(我在videohelp.com论坛上获得了一些帮助.)

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.)

这是一个示例ffmpeg命令，用于每隔1/2秒对关键帧的.mp4视频进行编码，以生成30fps的视频.(请参见 https://trac.ffmpeg.org/wiki/Encode/H.264 .)

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

这是一个示例ffmpeg命令，用于以每1/2秒的关键帧编码VP8 .webm视频的速度为30fps.(请参见 https://trac.ffmpeg.org/wiki/Encode/VP8 .)

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.

这篇关于如何使用ffmpeg使html5 webm视频平滑滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！