这是我参与「第四届青训营 」笔记创作活动的第14天
Web多媒体入门
重点知识点介绍
- Web 多媒体历史
- Web 多媒体基础知识
详细知识点介绍
一、多媒体历史
历史不长，只有二三十年，以往的浏览器不能支持视频音频的播放，得依赖flash的插件。新的HTML5原生就支持播放音频和视频，但是功能很有限，只能支持部分视频格式如mp4，并且关于视频的请求状态也无法获取，通过扩展API来完善
二、Web 多媒体基础知识
1. 编码格式
图像的基础知识：
思考 同样分辨率越大的图像所占的屏幕分辨率越大吗？
答案：实际上不一定，得同时结合分辨率和图像深度结合来分析
视频的基本概念：
-
分辨率：每一帧的图像分辨率
-
帧率：视频单位时间内包含的视频帧的数量
-
码率：就是指视频单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒
视频帧又会分为 I帧 P帧 B帧
第一帧就是I 帧，视频压缩编码的时候，I帧只依赖于自己，不依赖其他帧
P 帧是前一项预测编码帧，它的解码依赖于前一帧的结果
B 帧不仅依赖于前面的帧，还要依赖后面的帧，只有前后的帧都解码出来后才能进行B帧
每一个GOP的第一帧一定是关键帧，GOP是指其内的帧只有内部依赖关系，没有外部依赖，即两个GOP独立
2.为什么需要编码
首先计算一下一张图片的大小，并代入到一整个视频计算视频大小
如果不编码的话，一个视频将会变得非常大，编码的主要目的是压缩空间和传输。下面介绍几种常见的编码场景，需要压缩的几类数据
空间冗余 一小块内颜色几乎都一样，可以存储一个像素的颜色和对应的重复范围，这样可以减少许多存储空间
时间冗余
视频里两张连续图片里有百分之99的内容都是重复的，存储的时候将相同的部分称之为时间冗余
编码冗余
只有少数颜色的时候，采用位数更少的编码方式，而不是正常的二十四位编码方式，这样数字位数就减少了，需要比较的位数也少了
视觉冗余
人类视觉对于高频并不是很敏感，可以降低频度
预测是指将N+1帧和N帧作对比得出结论，确定要去除空间的冗余和视觉的冗余部分。
3.主要的一些编码格式
JVT里 H262 H264 H265 H266 目前最主流的编码
电视和光盘上基本上是H262，PC上常见的是H264编码，4K视频的话要更好的压缩率用H265，基本上手机端都在用H265编码，H266编码主要是VR
4.封装格式
封装格式：存储音视频、图片或者字幕信息的一种容器
三、应用场景
四、多媒体元素和扩展API
主要是 video audio MSE
需要注意的是 play方法是异步的
但是 video 和 audio 缺陷是不支持直接播放hls、flv等视频格式。视频资源的请求和加载无法通过代码来控制。
小结
这里简单介绍了下多媒体的历史和一些编码知识，扩充了多媒体的基础知识
