前端视角看视频处理

最近在做某视频剪辑项目的后端开发，之前对于视频的处理一直是空白状态。项目中涉及到的很多概念，随着不断的接触，有了一个从模糊到清晰的认知。

视频，英文：video，直译为视觉画面的频率，最原始的含义，应该是随着时间的流逝不停地播放画面，进而产生了一种视觉上连续的效果，彷佛重现了现实世界的场景。

画面更新频率

上图是一组小人跑步的图片集合（截取部分片段），组成的图片序列。当我们设置成连续自动播放后，就会形成一个最简单、最原始的视频。

2fps	4fps	6fps	8fps	10fps

10fps = 每秒钟播放 10 张画面，即每张图片的视觉停留时间为 0.1秒 （1 / 10）

如上图所示，每张图停留从0.5秒到0.1秒不等，当以不同的速度播放画面时，会产生不同的视觉效果。这里就引出了视频中很重要的一个概念：画面更新频率，也即帧率（英文：Frame rate，frame per second，FPS）。画面更新频率由早期的每秒6或8张，到现在的每秒 120 张不等。

帧数为多少时，可以保证视频画面的流畅？

通常在二十四帧以上，人类肉眼的“视觉暂留”和“脑补”现象，前者是指人类视网膜在光信号消失后，“残像”还会保留一定时间的现象；后者是大脑自行补足画面中间帧的“脑补”功能。它们的混合作用，让我们误以为每秒24帧回放的照片是连续的。

从这里可以知道，从视频里看到的画面，可以无限逼近现实的场景，却很难还原真实的世界。就像数学里的极限，视频里呈现的是分段函数，永远不能呈现平滑的曲线，可以无限接近去拟合。

视频大小比例

常见的视频有720P、1080P、4K等

例如，1080P视频一般是1920×1080，即约200万像素，而720P视频则是1280×720，即约92万像素。

K，表示视频的水平分辨率，可以理解成每一行的像素总数。

例如，2K视频一般是2048×1080，4K视频一般是 4096×2160（或者：3840×2160 家电显示器上标准 ）

视频的比例，表示视频画面的长和宽的比值。常见的视频比例有4:3，16:9。

可以看到 4:3的比例，比 16 : 9的比例更方正，更适合阅读，大部分的书籍或电子阅读器的屏幕，采用这个比例。

16 : 9，就是俗称的宽屏，更适合看电视高清视频或DVD。手机竖着摆放时，拍出照片的比例一般为 9 : 16

轨道

视频中的轨道，可以想象成各自独立运行的火车铁轨，自变量都是时间，因变量是不同轨道上的素材参数。包含背景、视频、音频、字幕等轨道。

如上图所示，类似于，前端web中绝对定位的层叠在一起的DIV块，或者图片中的图层，区别在于视频中的轨道是随时间轴不断延续的。每一条轨道都是独立存在，可以在单条轨道上自由编辑。除此之外，还可以添加滤镜、特效、花字、转场、文本等效果。

滤镜，和CSS3中的filter属性是一个意思，相当于是给图片添加滤镜，用来实现图像的各种特殊效果，比如灰色、颜色反转、黑白、马赛克、锐化等。可以让画面呈现另外一种风格，滤镜实现的效果也非常炫酷，比如打开美颜滤镜，瞬间返老还童。背后是一组滤镜函数，常见的有scale(缩放)、、overlay(叠加)、rotate(旋转)等

• 文字的处理，用于实现视频的字幕、旁白、解说等效果。
• 转场很好理解，电视剧中主角突然做了个梦，回到小时候的场景，画面就切过去了
• 特效，比如西游记中腾云驾雾的效果，武侠电视剧中乔峰大侠的降龙十八掌等等。

视频编解码

图像深度，每个像素点占据的存储空间（BPP，byte per pixel，像素深度），决定了图片的显示品质。假如一副彩色图像，每个像素用R（红）G（绿）B（蓝）三个分量表示，每个分量占据8位，则一个像素需要占据24位，即3个字节大小。

比特率：每秒传送的比特(bit)数。单位为bps(Bit Per Second)，比特率越高，传送数据速度越快。

未经过压缩的视频数据，占据的存储空间非常大，不便于在网络中传输。假如视频每秒播放30张图片，每张图片的宽高分别为300和200像素，每个像素点需要24比特（每个字节为8位，即3个字节）的存储空间，则一秒钟的视频占据多大的空间呢。

数据量约为 5.3M，按照1M传输带宽计算，比特率是131072字节/秒（1Mbps=131072字节/秒=128kb/s=0.125M/S），则需要等待40多秒钟。这还不算其它轨道的信息，一般的视频都有音频轨道、字幕的。

视频是可以压缩的，因为原始视频包含大量的冗余信息，比如：人的视觉系统有一些先天的特性，对某些细节不敏感。从理论上分析，基于人的视觉特性去掉视频冗余信息既可以保证视频质量又可以压缩视频体积。

• 预测：通过帧内预测和帧间预测降低视频图像的空间冗余和时间冗余。
• 变换：通过从时域到频域的变换，去除相邻数据之间的相关性，即去除空间冗余。
• 量化：通过用更粗糙的数据表示精细的数据来降低编码的数据量，或者通过去除人眼不敏感的信息来降低编码数据量。
• 扫描：将二维变换量化数据重新组织成一维的数据序列。
• 熵编码：根据待编码数据的概率特性减少编码冗余。

视频编码的国际标准组织：l ITU-T（国际电信联盟通信标准部）视频编码标准以H.26x的形式表示，主要为视频会议和可视电话等实时视频通信应用设计的。

ISO/IEC（国际标准化组织；I国际电工技术委员会）标准以MPEG-x的形式表示，主要为视频存储（DVD）、广播视频以及视频流（例如，网上视频、无线视频应用）设计的。

视频编码标准演变

上图可以清晰地看到各种编码的演进历史。当前通行的编码标准为ITU-T组织的H.26x系列视频编码和MPEG组织制定的部分编码标准，同一标准在不同的组织叫法可能不同。比如，AVC（高级视频编码），大家可能更熟悉它的另一个名字——H.264，AVC是MPEG组织在标准中给它起的名字。

项目实践

目前接触过OpenCV 和 FFmpeg 两款开源的视频处理库。OpenCV是计算机视觉的处理库，开源、跨平台，提供了C++、Python 和 Java 接口，多用于基于机器学习及深度学习的计算机视觉应用场景。FFmpeg是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。openCV中会包含FFmpeg，更加专注于图像方面的处理，而FFmpeg提供了强大的视频加工能力。在最近参与的项目中，两者均使用到了。

上图展示了，视频剪辑项目的业务处理流程。

• 解析项目的配置后，初始化项目的工作目录
• 解析素材地址，并下载到本地目录
• 采用多线程和多进程结合的方式，渲染素材媒体，控制并发数
• 底层调用 OpenCV 和 FFmpeg，合成视频，生成目标格式
• 添加片头、片尾以及水印等，上传到云端
• 删除中间环节产生的文件，释放系统资源

web前端延展

上图粗浅地展示了浏览器运行页面的过程，从输入页面地址，到最终呈现视图，经历一些列的过程。在某种程度上，可以将浏览器视作特殊的视频播放器，它也是一帧一甄的处理页面。

当遇到网络延迟或电脑性能问题时，便会出现卡顿的现象。这种问题，主要是由于丢帧造成的，某些关键的画面帧没有展示出来，进而无法在脑海中形成连续的画面，给人一种断层的感觉。

FFCreator

我们团队推出的 FFCreator 是一个基于 node.js 的轻量、灵活的短视频制作库。您只需要添加几张图片或视频片段再加一段背景音乐，就可以快速生成一个很酷的的视频短片。

你可以为视频添加音乐、字幕、文字、虚拟主播等各种元素。当然可以非常方便的来制作单个或批量数据可视化类的视频。

特性

• 完全基于node.js开发，非常易于使用，并且易于扩展和开发。
• 依赖很少、易安装、跨平台，对机器配置要求较低。
• 视频制作速度极快，一个 5 分钟的视频只需要 1-2 分钟。
• 支持近百种场景炫酷过渡动画效果。
• 支持图片、声音、视频剪辑、文本等元素。
• 支持字幕组件、可以将字幕与语音 tts 结合合成音频新闻。
• 支持图表组件，可以制作数据可视化类视频。
• 支持简单（可扩展）的虚拟主播，您可以制作自己的虚拟主播。
• 包含animate.css90%的动画效果，可以将 css 动画转换为视频。

FFCreator官方网址：https://github.com/tnfe/FFCreator

总结

本文粗浅地介绍了视频处理的一些基本概念，结合实际项目中遇到的困惑，逐一展开解释。然后，介绍了一些业务项目的处理过程，以及和Web前端的关联。最后，推荐一款我们团队自主研发的视频处理工具，感兴趣的小伙伴欢迎点赞收藏。

相关参考

https://github.com/tnfe/FFCreator

Wetzel C D, Radtke P H, Stern H W. Instructional effectiveness of video mediaM. Lawrence Erlbaum Associates, Inc, 1994.

https://github.com/sitkevij/awesome-video

https://www.jianshu.com/p/6ef3c18d61b0

https://www.zhihu.com/question/49460691

https://www.zhihu.com/question/49460691

https://blog.csdn.net/longsanjingye/article/details/82716927

http://www.360doc.com/content/18/0721/19/35242528_772198923.shtml