Web多媒体入门|青训营笔记

这是我参与「第四届青训营」笔记创作活动的第20天，今天学习的内容是web多媒体入门。

web多媒体历史

flash
HTML5
Media Source Extensions

基础知识

1. 编码格式

图像基本概念

图像分辨率︰用于确定组成一副图像的像素数据,就是指在水平和垂直方向上图像所具有的像素个数。

图像深度∶图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如,彩色图像每个像素用R.G.B三个分量表示,每个分量用8位,像素深度为24位，可以表示的颜色数目为2的24次方，既16777216个;一副单色图像存储每个像素需要8bit，则图像的像素深度为8位，最大灰度数目为2的8次方，既256个。

视频基本概念

分辨率∶每一帧的图像分辨率

帧率∶视频单位时间内包含的视频帧的数量

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

视频帧的分类

I帧：依赖自己本身（关键参考帧）
P帧：依赖于前一项帧
B帧：不仅以来前一项的帧，还依赖后一项的帧（双向）

GOP：两个I帧之间的间隔(第一个帧一定是I帧，不依赖于gop之外的其他帧）

编码的必要性：减少空间冗余、时间冗余、编码冗余、视觉冗余。

预测去除空间冗余和时间冗余
变换去除时间冗余
量化去除视觉冗余
熵编码去除编码冗余

2. 封装格式

概念：存储音视频、图片或者字幕信息的容器

3. 多媒体元素和扩展API

前端视频播放video、audio标签和MSE扩展API。

方法	属性
play()	开始播故音频/视频
pause()	暂停当前播放的音频/视频
load0	重新加载音频/视频元素
canPlayTypel)	canPlayTypel)
addTextTrackf()	向音频/视频添加新的文本轨道

注意:调用play方法（异步）马上调用pause会出错。

<audio>和<video>元素缺陷：

不支持直接播放hls、flv等视频格式
视频资源的请求和加载无法通过代码控制

分段加载（节约流量)

清晰度无缝切换

精确预加载

媒体源扩展API(Media Source Extensions)

（1）创建mediaSource实例

（2）创建指向mediaSource的URL

（3）监听sourceopen事件

（4）创建sourceBuffer

（5）向sourceBuffer中加入数据

（6）监听updateend事件

4. 流媒体协议

HLS:用于实时音视频流的传输。
HTTP-FLV
Dash 传输协议都是HTTP

应用场景

点播、直播、图片、云游戏、实时通信、视频编辑等。

# Web多媒体入门|青训营笔记