怎么将一个视频逐帧分解为图片格式输出

有时候我们会在网站中见到这种网页滚动效果

怎么将一个视频逐帧分解为图片格式输出插图
https://www.insta360.com/cn/product/insta360-oners

实现方法主要原理就是将原本的视频分解为图片,然后监听滚动事件根据滚动距离逐个替换img标签的src属性,以实现动态播放的效果,这其实也是电影和动画的本质。

但是怎么将视频分解为图片呢?

第一种是去 这个网站 ,网站可以支持将小视频转换,但是大一点的视频就很不方便而且速度很慢。

第二种是借助开源视频处理库 Ffmpeg 的强大力量。

首先需要下载这个库。我们可以去 这里 ,直接下载可执行文件

怎么将一个视频逐帧分解为图片格式输出插图1

将文件放在任意位置,然后将它配置进环境变量

怎么将一个视频逐帧分解为图片格式输出插图2
怎么将一个视频逐帧分解为图片格式输出插图3

配置环境变量

怎么将一个视频逐帧分解为图片格式输出插图4

之后可以直接重启终端或者 source 配置文件

怎么将一个视频逐帧分解为图片格式输出插图5

开始转换

怎么将一个视频逐帧分解为图片格式输出插图6

等待转换成功

怎么将一个视频逐帧分解为图片格式输出插图7

大功告成

怎么将一个视频逐帧分解为图片格式输出插图8