这是我参与「第四届青训营 」笔记创作活动的第16天
1-历史
- PC时代我们浏览器不支持音视频的播放，我们利用一些插件，例如：flash，IE上的Activeity，severlet等副客户端。
- 移动互联网时代，开始不支持flash，开始html5在浏览器播放音视频，支持MP4，OGG，和一些webm但一些格式不支持播放例如之前使用的FLV，功能有限。
- Media Source Extensions --媒体资源扩展API 基于这个API支持多格式播放例如FLV TS HLS格式。
2-基础知识
01.编码格式
- 图像基本概念：
- 视频基本概念:
- 编码格式：
I帧：帧内编码帧，它的视频的压缩不依赖于任何帧,解码只依赖于自身信息。
P帧：前向臆测编码帧，解码依赖于前面一帧。
B帧：双向预测编码帧，解码不仅依赖前面一帧，还有后面的一帧。
- DTS解码时间戳，PTS 显示时间戳 DTS是解码顺序的时间戳，PTS帧显示顺序时间戳 只有I帧和P帧时二者相等，有B帧则DTS发生变化。
- GOP 两个I帧之间的间隔：一般2秒到4秒
我们为什么要编码？ 一张分辨率为：1920 x 1080 的图片 大小：分辨率x 图像深度 => 1920 x 1080 x 24 / 8 = 6220800Byte (5.9M) 占有空间太大，所以编码是为了储存和传输。 编码就是将不相关，冗余的数据压缩，去除：
- 空间冗余--相同像素只用存储一个像素值，声明重复次数
- 时间冗余-- 不同帧相同的数据重复存储
- 视觉冗余--人类视觉系统看不见的颜色进行去除
- 编码冗余-- 用1代表蓝色，0代表白色
编码数据处理流程：
编码格式种类：
02- 封装格式
封装格式：存储音视频，图片或字幕信息的一种容器。
封装格式种类:
03- 多媒体格式和扩展API
video,audio
<html>
<head>
<title>video标签<title>
</head>
<body>
//直接使用src属性连接视频地址
<video src="./video.mp4" muted autoplay controls width="600px" height="500px"></video>
<video muted autoplay controls width="600px" height="500px">
<source src="./video.mp4"></source>
<source src="./video.OGG"></source>
</video>
</body>
</html>
方法、属性、事件：
注意play()方法是异步的，play之后快速触发pause会产生错误
缺陷：
- 视频资源的请求和加载无法通过代码控制
- 分段加载（节省流量）
- 清晰度无缝切换
- 精确预加载
MSE
浏览器支持情况：
使用MSE的过程步骤：
首先前面的video/mp4代表这是一段mp4格式封装的视频，同理也存在video/webm,audio/mpeg,audio/mp4这样的mime格式。
下面来看code的第二段
mp4a.40.2，这一段信息使用关于音频部分的，嗲表视频的音频部分采用了AAC LC标准：
mp4a代表此视频的音频部分采用MPEG-4压缩编码。
随后是一个分隔点，和一个十六进制数（40），这是ObjectTypeIndcation，40对应的是Audio ISO、IEC 14496-3标准，（不同值具有不同含义，详细参考官方文档）
然后又是一个分隔点，和一个十进制数（2），这是MPEG-4Audio Object Type，是一种H.264视频中常用的音频编码规范。
第一段avc1.42E01E即它用于告诉浏览器关于视频编解码的一些重要信息，如编码方式，分辨率，帧率，码率以及对解码器解码能力的要求。
在这个例子中avc1代表视频采用H.264编码，随后是一个分隔点，之后是3个两位的十六进制的数，这3个十六进制数分别代表：
- AVCProfileIndeication (42)
- profile_compability (E0)
- AVCLevellndication (1E)
第一个用于标识H.264的profile，后两个用于标识视频对于解码器的要求。
