这是我参与「第四届青训营 」笔记创作活动的第3天
Web多媒体历史
flash ==》 Html5 ==》 Media Source Extensions
以前都是通过第三方插件进行音视频的播放，第三方插件如flash。后面到了移动互联网时代，flash慢慢被淘汰了，Flash下坡路 ios不支持flash
那么怎么播放音视，视频呢?
慢慢地推出了Html5，它的video、audio标签原生支持音视频的播放，此时不再依赖第三方插件就可以在浏览器上进行音视频的播放。
但因为Html5的video,audio标签支持的视频格式有限，只支持Webp,ogg,map等
后期就有了Media Source Extensions 来解决上面一系列的问题，形成了以MSE为主，video标签为辅的局面
基础知识
图像基本概念
图像分辨率：用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数
图像深度：图像深度是指存储每个像素所需要的比特数。
图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。
例如，彩色图像每个像素用R,G,B三个分量表示,每个分量用8位，像素深度为24位，可以表示的颜色数目为2的24次方，既16777216个；一副单色图像存储每个像素需要8bit，则图像的像素深度为8位，最大灰度数目为2的8次方，既256个
视频基本概念
分辨率：每一帧的图像分辨率
帧率：视频单位时间内包含的视频帧的数量
码率：就是指视频单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒。
编码格式
I帧、P帧、B帧、GOP
I帧: 帧内编码帧，是一种自带全部信息的独立帧，无需参考其他图像便可独立进行解码
P帧: 帧间预测编码帧，需要参考前面的I帧或者P帧才能进行编码
B帧: 双向预测编码帧，也就是B帧记录的是本帧与前后帧的差别
GOP (group of picture): 两个I帧之间的间隔
为什么要编码？
==》 空间冗余、时间冗余、编码冗余、视觉冗余
编码数据处理流程
封装格式
封装格式： 存储音视频、图片或者字幕信息的一种容器
多媒体元素和扩展API
video、audio、MSE
video、audio元素属性及方法
audio 和 video 元素 缺陷
不支持直接播放hls、flv等视频格式
视频资源的请求和加载无法通过代码控制
- 分段加载（节约流量）
- 清晰度无缝切换
- 精确预加载
媒体源扩展API
- 无插件在Web端播放流媒体
- 支持播放hls、flv、mp4等格式视频
- 可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等
播放器播放流程
流媒体协议
HLS 全称是 HTTP Live Streaming，是一个由 Apple 公司提出的基于 HTTP 的媒体流传输协议，用于实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域
应用场景
Web多媒体 ： 点播、直播、图片、云游戏、实时通信、视频编辑
总结
flash --> H5 video --> MSE
编码格式、封装格式、多媒体元素、流媒体协议
应用场景
Web多媒体 ： 点播、直播、图片、云游戏、实时通信、视频编辑
新技术标准: Webassembly、WebCodecs、WebGPU、WebVR、WebXR
