浏览器中的音视频知识总结v1.0(工作中需要和视频打交道必看)

视频是什么

视频，其实就是一系列连续播放的图片，如果1s钟播放24张图片，那么人眼看到的就不再是一张张独立的图片，而是动起来的画面。其中一张图片称为一帧，1s播放的图片数称为帧率。常见的帧率有24帧/s，30帧/s,32帧/s。

视频是由图片构成的，图片是由像素构成的，假设尺寸为 1024*768。每个像素由RGB构成，每个8位，共24位。

这里补充一点2进制的知识

1位10进制数，能够表示0-9，共10种可能
类比一下，1位2进制，能够表示0，1，共表示2种可能性。
一位2进制称为1比特，即1 bit。
byte 字节是计算机计量的基本单位，1 byte= 8bit
1位16进制能够表示0-15，共16种可能性，如果换算成2进制，2^4=16,需要4位二进制才能表示1位16进制数。
1byte=8bit=2个16进制数
像素用16进制表示为 #ffffff,需要6个16进制，也就是3byte
复制代码

假设帧率是30，那么每秒钟的视频的尺寸如下：

30帧x1024x768x24=566231040Bits=70778880Bytes
复制代码

一分钟视频的尺寸就是 4246732800Bytes已经是4个G了。

1Byte=8bit
1MB=1024Byte(2^10)
1GB=1024MB(2^20Byte)
复制代码

可以看到，这个数据量是很大的，不好进行网络传输以及存储，所以需要对视频进行压缩，也就是编码。

编码过程

之所以能够对视频的中图片进行压缩，是因为视频和图片具有以下特点:

• 空间冗余：图像的相邻像素之间有较强的相关性，一张图片相邻像素往往是渐变的，不是突变的，没必要每个像素都完整地保存，可以隔几个保存一个，中间的用算法计算出来。
• 时间冗余：视频序列的相邻图像之间内容相似。一个视频中连续出现的图片也不是突变的，可以根据已有的图片进行预测和推断。
• 视觉冗余：人的视觉系统对某些细节不敏感，因此不会每一个细节都注意到，可以允许丢失一些数据。
• 编码冗余：不同像素值出现的概率不同，概率高的用的字节少，概率低的用的字节多，类似霍夫曼编码（Huffman Coding）的思路。

编码的流程如下：

 

 

经过编码之后，视频由一帧帧的图片，变成了一串串让人看不懂的二进制代码，因为编码的方式(算法)的不同，所以就有了编码格式的区分。常见的编码格式有 H.264,MPEG-4,VP8等。

这里需要注意的一点是，因为编码格式是有版权问题的，所以不同的浏览器支持的编码格式不同，所以就会出现有些编码格式的视频在某些浏览器播放不了，或者只有声音没有画面的情况。

我们前端开发只需要记住一点，主流浏览器支持的视频编码格式是h264。

音视频开发的前景，相信大家从相关的招聘网站上就可以看到，不管是流媒体开发还是音视频处理开发，都是大量招人的，并且由于入门门槛相对较高，学习周期长，薪资也是居高不下。

分享一个音视频高级开发交流群,整理了一些学习资料共享在群文件，相信能使大家学习起来更加快速有效，资料包括（C/C++，Linux，FFmpeg  webRTC  rtmp  hls rtsp ffplay  srs 等等），需要学习资料的点击788280672加入群自取哦~纯干货免费分享。

​

​ 

总结并补充一些概念

分辨率

屏幕是由一个个像素点组成的，我们常见的1080p，是指屏幕竖直方向有1080个像素，共有1920列，一共207万像素。2K，2560x1440，共369万像素。

放一个百度百科的解释

显示分辨率（屏幕分辨率）是屏幕图像的精密度，是指显示器所能显示的像素有多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多，所以分辨率是个非常重要的性能指标之一。可以把整个图像想象成是一个大型的棋盘，而分辨率的表示方式就是所有经线和纬线交叉点的数目。显示分辨率一定的情况下，显示屏越小图像越清晰，反之，显示屏大小固定时，显示分辨率越高图像越清晰。

复制代码

分辨率对视频体积有一定影响，但是不是分辨率越大，视频越清晰，还要看码率。

###帧率FPS

每秒显示的帧数，就是1s播放的图片数量(Frames per Second)。

百度百科解释：

由于人类眼睛的特殊生理结构，如果所看画面之帧率高于24的时候，就会认为是连贯的，此现象称之为视觉暂留。这也就是为什么电影胶片是一格一格拍摄出来，然后快速播放的。
而对游戏，一般来说，第一人称射击游戏比较注重FPS的高低，如果FPS<30的话，游戏会显得不连贯。所以有一句有趣的话：“FPS（指FPS游戏）重在FPS（指帧率）。
每秒的帧数(fps)或者说帧率表示图形处理器处理场时每秒钟能够更新的次数。高的帧率可以得到更流畅、更逼真的动画。一般来说30fps就是可以接受的，但是将性能提升至6