前言

作为一名技术小白，虽然之前因为时间原因没有发布笔记，但是仍在一直学习的路上。今天就以一个小白的身份，带领大家理解下Web多媒体的入门知识吧！

多媒体历史

web多媒体主要指图片、音频、视频和动画等；
web多媒体时代的发展主要经过了两个时代：PC时代和移动互联网时代`
PC时代：多媒体的播放依赖插件，如flash
移动互联网时代：主要采用html5的video和audio标签支持音视频播放
随着时代的发展，为了解决多格式等需求，人们逐渐完善了新的API：媒体资源扩展API（Media Source Extensions）

多媒体基础知识

1.编码格式

基本概念理解：
图像分辨率：用于确定组成一幅图像的像素数据，指在水平和垂直方向上图像所具有的像素个数。
图像深度：存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数。或者确定灰度图像的每个像素可能有的灰度级数。
视频分辨率：每一帧的图像分辨率（视频所有图像的分辨率都是相同的）
帧率：视频单位时间内包含的视频帧的数量
码率：指视频单位时间内传输的数据量（常用单位kbps）码率越高，对画面的描述就越精细，画质的损失就越小。

2.视频编码

什么是视频编码？
视频编码，即通过压缩技术，将原始视频格式的文件转换成另一种视频格式文件的方式。
为什么要对视频编码？简单理解，就是便于传输和存储。
为什么说便于传输和存储呢？我们来看个小小的例子：

微信图片_20220817110722.png 而市面上一台手机或者电脑的存储容量也才1T左右，一个视频就能把一台手机的容量装满，这显然是不符合人们的需求。因此，我们要对视频编码，即进行压缩，转化视频格式。

3.如何进行视频编码

在进行视频编码之前，我们首先要了解两个问题：

为什么能压缩？

视频是连续的图像序列，图像之间的色彩部分具有一定的连续性。同时，每一张图像本身又具有一定面积相同的像素点，这就给了压缩提供了方向性。

有什么方法压缩？

根据思路，可以大体分为两种压缩方法：帧内压缩和帧外压缩。

帧的分类

由压缩方法可以人为地将帧分为了三种类型：I帧、P帧、B帧

I帧：即关键帧，为这一幅画面的完整保留，解码时只需要本身的数据；
P帧：即差别帧，表示这一帧跟之前的一个关键帧（或P帧）的差别，解码时需要用之前缓存的画面叠加上本帧定义的差别，生成最终画面；
B帧：即双向差别帧，表示这一帧记录的是本帧与前后帧的差别，解码B帧，不仅要取得之前的缓存画面，还要解码之后的画面，通过前后画面的与本帧数据的叠加取得最终的画面。

冗余的种类

根据上面的思路可知，视频本身有冗余，这才提供了压缩的可能性。冗余大约有四种种类：
编码冗余、时间冗余、空间冗余、视觉冗余

空间冗余：一张图像里的相邻像素之间具有较强的相关性；

时间冗余：具有时间顺序的先后图像，它们在图像内容上具有相似性；

编码冗余：不同像素值出现的概率不同。例如，一张图片除了蓝色部分就是灰色部分。那么就可以用“1”代替蓝色编码，“0”代替灰色编码存储和传输，极大提升了存储和传输效率；
视觉冗余：人的视觉系统对某些细节不敏感，因此可以把不敏感的部分像素格式化；
此外，除了课堂讲的四种冗余信息外，还有知识冗余、结构冗余等。

编码数据流程

预测：帧内预测（空间冗余、I帧）和帧外预测（时间冗余、P帧）
变换：如：按照大小的顺序进行排列
量化：去除视觉冗余
熵编码：去除编码冗余

封装格式

视频编码后还要对其进行封装。所谓封装，即封装格式：存储音视频、图片或者字幕信息的一种容器（可以简单理解为月饼包装盒），目的是便于存储和传输。

Web多媒体应用场景

Web多媒体的应用场景：视频编辑、点播、直播、图片、云游戏、实时通信等。

小结

以上就是本小白学习web多媒体入门这一堂课的笔记记录啦！有什么错误的地方欢迎大家指正哦~！接下来的学习生活本小白会继续努力哒！

Web多媒体入门 | 青训营笔记

前言