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

多媒体发展

• Flash：音视频依赖于flash插件
• Html5：<video>,<audio>标签原生支持音视频，但功能也有限（视频格式有限制，状态检测不到）
• Media Source Extensions：扩展API实现Html5的不足之处

认识多媒体

编码格式

图像基本概念

• 图像分辨率：同于确定组成一幅图像的像素数据，指水平和垂直方向上图像所具有的像素个数
• 图像深度：存储每个像素所需要的比特数

视频基本概念

• 分辨率：每一帧的图像分辨率
• 帧率：视频单位时间内包含的视频帧数的数量
• 码率：视频单位时间内传输的数据量，一般用kbps（千位每秒）来表示

I帧、P帧、B帧的解码

I帧：只依赖自己的帧
P帧：依赖于前一项的帧
B帧：依赖于双向的帧
图左：dts:123456 pts:123456
图右：dts:124365 pts:123456

gop:两个I帧之间的间隔 空间冗余， 时间冗余 编码冗余 视觉冗余

处理数据流程

封装格式

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

多媒体元素和扩展API

<audio>和<video>元素缺陷

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

媒体源扩展API

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

1. 创建mediaSource实例
2. 创建指向mediaSource的URL
3. 监听sourceopen事件
4. 创建sourceBuffer
5. 乡sourceBuffer中加入数据
6. 监听updataend事件

• 播放器播放流程

流媒体协议

HLS全称HTTP Live Streaming,是一个由Apple公司提出的基于HTTP的媒体流传输协议，用于实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域。

总结

多媒体从flash发展到H5再到MSE，与之对应的编码格式、封装格式、多媒体元素也发生技术提升，现行技术标准包括Webassembly、WebCodes、WebGPU、WebVR、WebXR都在不断涌现出来。