这是我参与「第四届青训营 」笔记创作活动的的第9天
在当今市时代，多媒体与我们息息相关，短视频，直播等等都是多媒体的运用之一，如今多媒体的发展蓬勃向上。
web多媒体历史
web多媒体入门
编码格式
图像的基本概念
图像分辨率: 用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。
图像深度: 图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如，彩色图像每个像素用 R，G，B三个分量表示，每个分量用8位，像素深度为24位，可以表示的颜色数目为2的24次方，既166777216个；一副单色图像存储每个像素需要8bit，则图像的像素深度为8位，最大灰度数目为2的8次方，既256个。
视频基本概念
分辨率： 每一帧的图像分辨率
帧率： 视频单位时间内包含的视频帧的数量
码率： 就是指视频单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒
视频帧
I帧，P帧，B帧
视频帧分为三种：I帧，P帧，B帧
I帧： 即关键帧，属于帧内压缩。可以理解为该帧画面被完整保留，解码时只需要本帧数据就可以完成。
P帧： 表示的是这一帧跟之前的一个关键帧（或P帧）的差别，解码时需要用之前缓存的画面叠加上本帧定义的差别，生成最终画面。（也就是差别帧，P帧没有完整画面数据，只有与前一帧的画面差别的数据）
上图中，第1帧为 I帧 ，在解码的时候值需要本帧自己的数据即可，而后面的 第二帧 为 P帧 ，需要先解码前面第一帧的数据才能解码该帧。后面 第三帧，第四帧等等的数据也是如此，需要先解码前面一帧的数据，才能解码本帧的数据。
B帧： 双向差别帧，也就是B帧记录的是本帧与前后帧的差别，换言之，要解码B帧，不仅要取得之前的缓存画面，还要解码之后的画面，通过前后画面的与本帧数据的叠加取得最终的画面。
上图的第3帧为 B帧 ， B帧需要依靠前后的两帧数据(第2帧和第3帧)，因此，上面解码的循序是 124365
GOP
GOP 即两个 I帧 之间的间隔。
运用场景
首先，如果我们抛开 B帧 ，仅仅谈论 I帧和P帧。
I帧所占的空间更大。
但是我们也不能将一个视频全部设置为 P帧 ，因为如果用户想要将视频跳转到某个时刻，那么浏览器必须从开头的 I帧 开始，一直解压到该帧。这样显然会增加解压的时间。
因此，我们常常将一个 GOP 的时间间隔设置为2s或者4s。
那么，B帧的作用是什么呢？
从上面的解释看，如果视频流只有I和P，解码器可以不管后面的数据，边读边解码，线性前进。
但网络上的电影很多都采用了B帧，因为B帧记录的是前后帧的差别，比P帧能节约更多的空间，但这样一来，文件小了，解码器就麻烦了，因为在解码时，不仅要用之前缓存的画面，还要知道下一个I或者P的画面（也就是说要预读预解码），而且，B帧不能简单地丢掉，因为B帧其实也包含了画面信息，如果简单丢掉，并用之前的画面简单重复，就会造成画面卡（其实就是丢帧了），并且由于网络上的电影为了节约空间，往往使用相当多的B帧，B帧用的多，对不支持B帧的播放器就造成更大的困扰，画面也就越卡。
为什么要进行编码？
看上面这张图，如果不进行编码，那么一个 1920 * 1080的 90 分钟视频，需要占据933个G的内存，这是手机和PC都不能接受的。
而视频经过编码后，所占的内存将大大缩小。这就是编码的意义。
如何编码
空间压缩
上面这张图片中的小黑框，放大了之后，我们发现里面的内容基本上是一模一样的，那么我们只需要存储重复了多少次，这样就可以极大的压缩视频的体积。
时间压缩
上面这张图片，我们发现，其实台球，台球桌甚至是视角的位置都没有发生改变，那么后1帧的数据和前1帧的数据十分的相似，那么我们只需要存储后1帧与前1帧不同的地方就可以了。
是不是看起来十分的眼熟，这在我们上面将的P帧也有所涉猎。
编码压缩
我们之前说过，每一个像素在存储的时候都占用24位，但想上面这张图片，只有两个颜色，那么我们可以将蓝色存为1，白色存为0，那么原来一个像素需要24位，现在就只需要1位即可。
视觉压缩
当我们用 10像素 来表示一张图片的时候，图片可能会十分的模糊，但是当我们用 1000 像素 和 100000像素 来表示一张图片的时候，我们的人眼可能观察不出来什么差别，这时候，我们就可以利用人眼的视觉来压缩这些视屏。
编码数据的处理流程
编码的格式
封装格式
多媒体元素和扩展API
video和audio
<video controls poster="../2.png" muted width="720px" height="720px">
<source src="../1.mp4#t=2,10" type="video/mp4">
</video>
方法
属性
除了上面展示的属性，video和audio还有很多属性。
事件
更加详细的video属性和方法等，可以参考这一篇博客： 从零开发弹幕视频播放器1 - 掘金 (juejin.cn)
媒体源扩展API
更加详细的内容请参考：流媒体视频基础 MSE 入门 & FFmpeg 制作视频预览缩略图和 fmp4 - 掘金 (juejin.cn)
多媒体的应用场景
参考文献
(97条消息) 什么是I帧,P帧,B帧_Rachel-Zhang的博客-CSDN博客_i帧
【青训营】-🎨走进Web多媒体技术 - 掘金 (juejin.cn)
流媒体视频基础 MSE 入门 & FFmpeg 制作视频预览缩略图和 fmp4 - 掘金 (juejin.cn)
结语
文章如果有不正确的地方，欢迎指正，共同学习，共同进步。
若有侵权，请联系作者删除。
