这是我参与「第四届青训营 」笔记创作活动的的第16天

编码格式

图像基本概念

图像分辨率：用于确定组成一幅图像的像素数据，定义了图像再水平和垂直方向所具有的像素个数。

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

视频概念

分辨率：每一帧图像的分辨率。

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

码率：视频单位时间内传输的数据量，一般用kbps来表示。

I帧、P帧、B帧

• I帧表示关键帧解码时只需要本帧数据就可以完成
• P帧码时需要用之前缓存的画面叠加上本帧定义的差别，生成最终画面。
• B帧是双向差别帧，也就是B帧记录的是本帧与前后帧的差别

封装格式

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

HTML 中的多媒体元素

在HTML中有<audio>和<video>两种标签来实现多媒体，它们的方法是一样的

• play()开始播放
• pause()暂停当前播放
• load()重新加载音视频元素
• canPlayType()检测浏览器能播放的类型
• addTextTrack()向音视频添加新的文本轨道

标签的缺陷

不支持直接播放hls、flv等视频格式

视频资源的请求和加载无法通过代码控制，比如：

• 分段加载
• 清晰度无缝切换
• 精确预加载

多媒体元素和扩展API

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

媒体源扩展API（Media Source Extension）

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

流媒体协议

协议名称	传输协议	封装格式	HTML5
HLS	HTTP	M3U8/TS	支持
HTTP-FLV	HTTP	FLV	支持
Dash	HTTP	FMP4	支持
RTMP	TCP	FLV	不支持