你的视频为什么这么慢
从video标签原理去了解视频播放过程�
什么会导致视频卡顿
-
视频过大
-
网速
视频过大
我们手机中的1min视频大概有多大？
一个像素是由rgba4通道组成，但在视频里面通常只有三个通道，所以图片上一个像素大小为8b * 3 = 24b = 3B即3个字节。
一个1080p（1920 * 1080），帧率为30ftps（1s/30图片，苹果相机最低30帧）一分钟为3B * 1920 * 1080 * 30 * 60 = 12441600000B = 10GB。10GB的概念就是现阶段移动最大的流量包就是20GB，也就是看2分钟视频。由此可见视频如果不进行压缩的话是十分大的。
编码/压缩
压缩氛围有损压损和无损压缩，无损压缩如gzip/flac，是可以还原成原本未压缩的完整数据，而有损压缩如h264/mp3等一旦压完之后就无法再还原成更高清晰度的数据了。
网页视频通常是有损压缩，目标是降低一点清晰度的同时让体积得到大大的减少，降低的清晰度能达到对人眼不可察觉或者几乎无法分辨的水平。以H264为例压缩算法主要包括：
-
帧内预测压缩，解决的是空域数据冗余问题。
-
运动估计与补偿， 解决的是时域数据冗徐问题。
-
整数离散余弦变换（DCT），将空间上的相关性变为频域上无关的数据然后进行量化。CABAC压缩。
视频的编码方式主要MPEG-1（VCD）到MPEG-2（DVD）再到MPEG-4（数码相机），再到现在主流的网络视频用的h264和比较新的h265，同等压缩质量下，压缩率不断地提到提升，它们可能都是.mp4的文件后缀，mp4格式是一个容器， 可以支持流式传输，不用把整个文件下载下来才播放。谷歌主导的VP8、VP9和AV1编码（主要在WebRTC里面使用）。编码的压缩率越好，它的算法通常会更复杂，所以一些低端设备可能会扛不住进而使用较老的编码格式。
解码的目的就是解压缩，把数据还原成原始的像素。FFmpeg是一个很出名的开源的编解码C库，Chrome也使用了它做为它的解码器之一。
音频压缩
视频是每秒25或者30帧图像形成连续的动画，用离散来表示连续，声音也是同样道理，它有一个采样率的概念，麦克风把声音转化为不同强度的电流信号，如果采样率为1k Hz即1s 1000次，CD唱片音质的采样率44.1k Hz，所以为了高保真，1s需要测44k次。同时音频还有一个位深的概念。类似于视频的图片分辨率。一般数字音频位深为16进制，DVD为24进制。所以1分钟的双声道（立体音）声音的CD格式存储需要占用的硬盘空间大小为：
44100 * 16b * 60 / 8 * 2 = 10MB
音频编码压缩的原理也是去冗余， 音频中存在的冗余：
-
1、时域冗余。时域分布的非均匀性、样值间的相关性、信号周期之间的相关性、长时自相关性和静音。
-
2、频域冗余。长时功率谱密度的非均匀性和语音特有的短时功率谱密度。
-
3、听觉冗余。人耳的掩蔽效应、人耳对不同频段的声音的敏感程度不同、人耳对语音信号的相位变化不敏感。感知音频编码器原理 感知音频编码器利用心理声学模型，在采样率不变的情况下，根据信号的情况有选择的减小量化比特数，即人耳敏感的部分多分配量化比特数，使它的信号质量较好，失真较少，而对不敏感的部分少分配量化比特数，并通过掩蔽效应相应较小量化噪声的影响，这样可以在听觉质量不变的情况下，尽可能降低数据的传输速率。它利用心理声学模型，将人耳不能感知的声音成分去掉，只保留人耳感知的声音成分；另一方面，也不一味追求最小的量化噪声，只要量化噪声不被人耳感知即可。
互联网常用的编码一般为AAC编码压缩比例为18:1，有传闻说可以到20:1。
网速
视频连续加载过程（Chrome的buffer控制加载机制）
在流媒体传输里面有一个重要的概念就是buffer缓冲空间大小，如果buffer太大，那么一次性下载的数据太多，用户还没播到那里不划算，相反如果buffer太小不够播放可能会经常卡住加载。在实时传输领域，实时流媒体通信的双方如果buffer太大的话会导致延迟太大，如果buffer太小那么能做的事情就比较少如拥塞控制、丢包重传等。
我们可以来看一下Chrome播放音视频的时候buffer是怎么控制的，它的实现是在src/media/blink/multibuffer_data_source.cc这个文件的UpdateBufferSizes函数，简单来说就是每次都往后预加载10s的播放长度，并且最大不超过50MB，最小不小于2MB，往前是保留2s播放长度。
