web多媒体入门
这是我参与「第四届青训营 」笔记创作活动的的第8天。
本堂课的知识要点：
- web多媒体历史
- 基础知识
- 应用场景
- 总结与展望
01.web多媒体历史
三个历史阶段：
- flash
- html5
- Media Source Extension(未来发展趋势)
02.基础知识
- 编码格式
- 封装格式
- 多媒体元素和扩展api
- 流媒体协议
编码格式
图像基本概念
- 图像分辨率: 用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。
- 图像深度︰ -图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如，彩色图像每个像素用R,G,B三个分量表示,每个分量用8位,像素深度为24位，可以表示的颜色数目为2的24次方，既16777216个﹔一副单色图像存储每个像素需要8bit，则图像的像素深度为8位，最大灰度数目为2的8次方，既256个。
视频基本概念
- 分辨率︰每一帧的图像分辨率
- 帧率∶视频单位时间内包含的视频帧的数量
- 码率:就是指视频单位时间内传输的数据量,一般我们用kbps来表示，即千位每秒。
视频帧
- I帧：帧内编码帧
- P帧：前向预测编码帧
- B帧：双向预测编码帧
编码数据处理流程
封装格式
多媒体扩展元素api
- video
- audio
- MSE
video的使用
audio的使用
video及audio的方法
video及audio的属性
video及audio的事件
video及audio的缺陷
- 不支持直接播放hls、flv等视频格式
- 视频资源的请求和加载无法通过代码控制
MSE的出现
媒体源扩展API(Media Source Extensions)
- 使用流程：
- 创建mediaSource实例
- 创建指向mediaSource的URL
- 监听sourceopen事件
- 创建sourceBuffer
- 向sourceBuffer中加入数据
- 监听updateend事件
流媒体协议
前三个是常用的协议。
03.应用场景
04.总结与展望
总结：
- flash 》 H5 video 》MSE
- 编码格式、封装格式、多媒体元素、流媒体协议
- 应用场景
展望
新技术标准
- Webassembly
- WebCodecs
- WebGPU
- WebVR、WebXR
