这是我参与第四届青训营笔记创作的第5天

Web多媒体入门

目录：

Web多媒体历史

基础知识

应用场景

总结与展望

01.Web多媒体历史

03.Media Source Extensions

02.基础知识

1. 01.编码格式
2. 02.封装格式
3. 03.多媒体元素和扩展API
4. 04.流媒体协议

编码格式

图像基本概念

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

视频基本概念

• 分辨率：每一帧的图像分辨率
• 帧率：视频单位时间内包含的视频帧的数量
• 码率：就是指视频单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒。
• I帧、P帧、B帧
• GOP(group of picture):两个I帧之间的间隔

为什么要编码？

• 分辨率：1920x1080
• 大小：1920x1080x24/8=6220800Byte(5.9M)
• 帧率：30FPS
• 时长：90分钟
• 大小：933G

空间冗余

时间冗余

编码冗余

视觉冗余

编码数据处理流程

预测→变换→量化→熵编码

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

封装格式

• 封装格式：存储音视频、图片或者字幕信息的一种容器
• 视频、音频、字幕→封装格式

多媒体元素和扩展API

video、audio、MSE

• 元素
• 元素
• 和元素 方法
• 和元素 属性
• 和元素 缺陷：

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

• 视频资源的请求和加载无法通过代码控制：分段加载(节约流量)、清晰度无缝切换、精确预加载
  

媒体源扩展API(Media Source Extensions)

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

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