这是我参与「第四届青训营 」笔记创作活动的第12天
Web多媒体历史
基础知识
01.编码格式
图像基本概念
图像分辨率:用于确定组成一副图像的像素数据,就是指在水平和垂直方向上图像所具有的像素个数。
图像深度:图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如,彩色图像每个像素用R,G,B三个分量表示,每个分量用8位，像素深度为24位,可以表示的颜色数目为2的24次方、既16777216个;一副单色图像存储每个像素需要8bit,则图像的像素深度为8位,最大灰度数目为2的8次方,既256个。
视频基本概念
分辨率:每一帧的图像分辨率
帧率:视频单位时间内包含的视频帧的数量
码率:就是指视频单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒。
- I帧又称帧内编码帧，是一种自带全部信息的独立帧，无需参考其他图像便可独立进行解码
- P帧又称帧间预测编码帧，需要参考前面的I帧或者P帧才能进行编码
- B帧又称双向预测编码帧，也就是B帧记录的是本帧与前后帧的差别
为什么要编码？
空间冗余
时间冗余
编码冗余
视觉冗余
编码数据处理流程
02.封装格式
封装格式:存储音视频、图片或者字幕信息的一种容器
| 视频封装格式 | 视频文件格式 |
|---|---|
| AVI(Audio Video Interleave) | AVI |
| WMV(Windows Media Video) | WMV |
| MPEG(Moving Picture Experts Group) 分为MPEG-1,MPEG-2, MPEG-4 | MPG MPEG VOB DAT 3GP MP4 |
| Matroska | MKV |
| Real Video | RM RMVB |
| QuickTime File Format | MOV |
| Flash Video | FLV |
| ... | ... |
03.多媒体元素和扩展API
<video>元素
<audio>元素
<audio>和<video>元素 方法
| 方法 | 描述 |
|---|---|
| play() | 开始播放音频视频 |
| pause() | 暂停当前播放的音频视频 |
| load() | 重新加载音频视频元素 |
| canPlayType() | 检测浏览器是否能播放指定的音频视频类型 |
| addTextTrack() | 向音频/视频添加新的文本轨道 |
<audio>和<video>元素 属性
| 属性 | 描述 |
|---|---|
| autoplay | 设置或返回是否在加载完成后随即播放音频视频 |
| controls | 设置或返回音频/视频是否显示控件(比如播放/暂停等) |
| currentTime | 设置或返回音频/视频中的当前播放位置(以秒计) |
| duration | 返回当前音频视频的长度(以秒计) |
| src | 设置或返回音频视频元素的当前来源 |
| volume | 设置或返回音频/视频的音量 |
| buffered | 返回表示音频视频已缓冲部分的TimeRanges对象 |
| playbackRate | 设置或返回音频/视频播放的速度 |
| error | 返回表示音频视频错误状态的MediaError对象 |
| readyState | 返回音频视频当前的就绪状态 |
<audio>和<video>元素 事件
| 事件 | 描述 |
|---|---|
| loadedmetadata | 当浏览器已加载音频/视频的元数据时触发 |
| canplay | 当浏览器可以开始播放音频/视频时触发 |
| play | 当音频/视频已开始或不再暂停时触发 |
| playing | 当音频/视频在因缓冲而暂停或停止后已就绪时触发 |
| pause | 当音频/视频已暂停时触发 |
| timeupdate | 当目前的播放位置已更改时触发 |
| seeking | 当用户开始移动/跳跃到音频/视频中的新位置时触发 |
| seeked | 当用户已移动/跳跃到音频/视频中的新位置时触发 |
| waiting | 当视频由于需要缓冲下—帧而停止时触发 |
| ended | 当目前的播放列表已结束时触发 |
<audio>和<video>元素缺陷
- 不支持直接格放hls、flv小等视频格式
- 视频资源的请求和加载无法通过代码控制
- 分段加载(节约流量)
- 清晰度无缝切换
- 精确预加载
MSE
媒体源扩展API (Media Source Extensions)
- 无插件在web端播放流媒体
- 支持播放hls、flv、mp4等格式视频
- 可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等
使用过程
- 创建mediaSource实例
- 创建指向mediaSource的URL
- 监听sourceopen事件
- 创建sourceBuffer
- 向sourceBuffer中加入数据
- 监听updateend事件
MSE播放流程
播放器播放流程
mp4和fmp4
04.流媒体协议
| 协议名称 | 传输协议 | 封装格式 | HTML5 |
|---|---|---|---|
| HLS | HTTP | M3U8/TS | 支持 |
| HTTP-FLV | HTTP | FLV | 支持 |
| Dash | HTTP | FMP4 | 支持 |
| RTMP | TCP | FLV | 不支持 |
HLS全称是HTTP Live Streaming，是一个由Apple公司提出的基于HTTP的媒体流传输协议，用于实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域。
应用场景
总结与展望
总结
- flash → H5 video → MSE
- 编码格式、封装格式、多媒体元素、流媒体协议
- 应用场景
新技术标准
- Webassembly
- WebCodecs
- WebGPU
- WebVR、WebXR
