这是我参与「第四届青训营 」笔记创作活动的第11天
历史
第一代：flash (移动端不支持) 第二代：HTML5 (vedio / audio) （原生功能有限，需要转换格式） 第三代：Media Source Extentsion
基础知识
一、编码格式
图像基本概念
1.图片分辨率：水平和垂直方向上的像素个数 2.图像深度： 存储一个像素占用的位数，影响像素个数（RGB 3*8 = 24bit、单色图像 8bit）
视频基本概念
1.分辨率： 每一帧的图像（所有帧的分辨率都一样） 2.帧率：视频一秒渲染图像的个数 （25 30） 3.码率：单位时间内传输的数据量 （kbps 千位/秒）
I帧、p帧、B帧 （解码dts会受到影响）
-
I帧(帧内编码帧 又称intra picture)解码不依赖前后帧
-
P帧(前向预测编码帧 又称predictive-frame)解码依赖前面的帧
-
B帧(双向预测内插编码帧 又称bi-directional interpolated prediction frame)解码依赖前后的帧
-
DTS（Decoding Time Stamp）：即解码时间戳，这个时间戳的意义在于告诉播放器该在什么时候解码这一帧的数据。
-
PTS（Presentation Time Stamp）：即显示时间戳，这个时间戳用来告诉播放器该在什么时候显示这一帧的数据。
二、封装格式
- 存储音视频、图片或者字幕信息的一种容器，将已经编码压缩好的视频轨和音频轨按照一定的格式放到一个文件中
三、多媒体元素和扩展API
1.video
2.audio
- 缺陷： 不能直接播放hls、flv等视频格式；视频资源的请求和加载无法通过代码控制
3.MSE
- MSE解决了上面两个API的缺陷，它有以下优点：
- 无插件在web端播放流媒体
- 支持播放hls/flv/mp4等格式视频
- 可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等
