前言
这是我参与「第四届青训营」笔记创作活动的第13天
下面就让我们一起学习web多媒体的知识吧！😁😄
web多媒体历史
20世纪90年代初浏览器和Web的概念刚刚出现的时候，没有任何多媒体。很快，图像开始加入，但是充其量是穷人的多媒体。虽然随着GIF动画的出现，这些图像可以成为动画，但是这些动画完全是非交互性的。即使在音频和视频文件出现时，互联网技术在Web上传递这些文件的能力也很有限。互联网连接很慢，而音频和视频文件很大，没有人希望等待大文件的下载。文件下载之后，也必须使用独立于Web浏览器的外部播放器来查看内容，这在当时很正常，很少有人为此抱怨。
随着互联网地飞数发展，网速地提升带来了Web上发送多媒体的能力
基础知识
编码格式
图像基本概念
视频基本概念
- 分辨率：每一帧得图像分辨率
- 帧率：视频单位时间内包含得视频帧的数量
- 码率：就是指视频单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒
视频编码
I帧、P帧、B帧
- I帧：关键帧,采用帧内压缩技术
eg：I帧不需要依赖于任何帧，自己就可独自解码
- P帧：向前参考帧.压缩时只参考前一个帧.属于帧间压缩技术
eg:如图第一张图片，序号2为P帧，如果要解码序号2，就先得把序号1（I帧）给解码出来；而序号3也要先等序号2解码出来才能自己解码。所以P帧时前向预测编码帧
- B帧：双向参考帧,压缩时既参考前一帧也参考后一帧....
eg: 如图第二张图片，序号3为P帧，解码要依赖于前后两帧（即序号2和序号4），同理序号5解码也类似
GOP(group of picture**)** 两个I帧之间得间隔
为什么要编码
我们前面提到了好多编码的概念，那么为什么要编码呢？
计算上面图像的大小，发现占用存储空间为5.9M，假设帧率为30FPS（一秒有30张图片），时长为90min不压缩的视频的大小可达933G！要知道一个手机好一点的内存也就512G，一个未压缩的933G视频都装不下。所以视频的编码主要是减小存储还有就是便于传输！
冗余
视频编码把视屏里面不相关的数据进行去除或压缩，来看看编码的时候剔除了哪些冗余数据
- 空间冗余
摆一张图的一部分放大4倍会发现这部分颜色几乎都是一样的，相同的颜色都存储一遍其实是很浪费存储空间的
- 时间冗余
- 编码冗余
- 视觉冗余
编码数据处理流程
封装格式
编码完成之后怎样进行传输呢，这时需要提到封装格式
封装格式： 存储音视频，图片或者字幕信息的一种容器，便于储存和传输
多媒体元素和扩展API
多媒体元素
- vedio元素
- audio元素
- vedio元素和audio元素方法
- vedio元素和audio元素属性
- vedio元素和audio元素事件
- vedio元素和audio元素缺陷
- 不支持直接播放hls，flc等视屏格式
- 视频资源的请求和加载无法通过代码控制
- 分段加载（节约流量）
- 清晰度无缝切换
- 精确预加载
媒体源扩展API
- 无插件在web端播放流媒体
- 支持播放hls，flv，mp4等格式视频
- 可实现视频分段加载，清晰度无缝切换，自适应码率。精确预加载等
MSE播放流程
播放器播放流程
流媒体协议
HLS
应用场景
总结
- web多媒体历史
flash -> H5 video -> MSE
- 编码格式，封装格式，多媒体元素，流媒体协议
- 应用场景
