Web 多媒体历史

Flash
- ios 不支持
- flash 开始走下坡路
HTML5
- 原生只支持 mp4 等一些基本格式
- 所有的视频相关的东西全被浏览器接管，我们无法控制
Media Source Extensions API
- 支持多视频格式播放
- 可以控制视频相关的 API

基础知识

编码格式

图像基本概念

图像分辨率：用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。
图像深度：图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如，彩色图像每个像素用R,G,B三个分量表示，每个分量用8位，像素深度为24位，可以表示的颜色数目为2的24次方，既16777216个：一副单色图像存储每个像素需要8bit,则图像的像素深度为8位，最大灰度数目为2的8次方，既256个。

视频基本概念

分辨率

每一帧的图像分辨率

帧率

视频单位时间内包含的视频帧的数量跳动青训

码率

就是指视频单位时间内传输的数据量般我们用kbPs来表示，即千位每秒。

I帧、P帧、B帧

I帧

又称帧内编码帧，是一种自带全部信息的独立帧，无需参考其他图像便可独立进行解码

P帧

又称帧间预测编码帧，需要参考前面的帧或者P帧才能进行编码

B帧

又称双向预测编码帧，也就是B帧记录的是本帧与前后帧的差别

GOP (group of picture)

两个I帧之间的间隔

为什么需要编码

如果不进行编码，我们的每一帧数据量会非常的大

分辨率：1920X1080
大小：1920×1080x24/8=6220800Byte (5.9M)

帧率：3OFPS
时长：90分钟
大小：933G

空间冗余

这里我们可以只存储蓝色，然后循环100次

时间冗余

第n 帧和第 n+1 帧之间，其实只有台球干在变化，其他位置并没有变化，我们可以在 n-n+1帧之间只记录台球干的变化

编码冗余

这里其实只有2个颜色，我们只要记录这个2个颜色和他们的范围

视觉冗余

去除一些我们视觉系统感知不到或感知不明显的颜色

编码数据处理流程

封装格式

存储音视频、图片或者字幕信息的一种容器

多媒体元素和扩展 API

`video`元素

`audio`元素

`audio`和 `video`元素

`audio` 和 `video` 元素的缺陷

不支持直接播放 hls、fv 等视频格式
视频资源的请求和加载无法通过代码控制
- 分段加载（节约流量）
- 清晰度无缝切换
- 精确预加载

媒体源扩展API (Media Source Extensions)

无插件在web端播放流媒体
支持播放hls、fv、mp4等格式视频
可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等

创建mediaSource实例
创建指向mediaSource的URL
监听sourceopen事件
创建sourceBuffer
向sourceBuffer r中加入数据
监听updateend事件

var mime 'video/mp4;codecs="avc1.42E01E,mp4a.40.2"后面的这一段codecs=""比较特别，以逗号相隔，分为两段：
第一段，‘Vc1.42E01E’,即它用于告诉浏览器关于视频编解码的一些重要信息，诸如编码方式、分辨率、帧率、码率以及对解码器解码能力的要求。
在这个例子中，'vc1’代表视频采用H.264编码，随后是一个分隔点，之后是3个两位的十六进制的数，这3个十六进制数分别代表：

AVCProfilelndication (42)

orofile_compability (E0)

AVCLevellndication (1E)

第一个用于标识H.264的profile,后两个用于标识视频对于解码器的要求。
前面的video/mp4代表这是一段mp4格式封装的视频，同理也存在类似video/webm、audio/mpeg、audio/mp4这样的mime格式。
下面来看codecs的第二段’mp4a.40.2’,这一段信息是关于音频部分的，代表视频的音频部分采用了AAC LC标准：'mp4a’代表此视频的音频部分采用MPEG-4压缩编码
随后是一个分隔点，和一个十六进制数(40)，这是ObjectTypelndication,40对应的是 Audio ISO/IEC14496-3 标准。（不同的值具有不同的含义，详细可以参考官方文档）
MPEG-4Part3 Subpart4)",具体是什么意思就不翻译了，其实就是一种H.264视频中常用的音频编码规范 https://datatracker.ietf.org/doc/html/rfc6381