这是我参与「第四届青训营 」笔记创作活动的第5天
一、Web多媒体历史
插件时代
在移动互联网时代之前，浏览器本身基本上不支持音频和视频的播放，想要播放音视频必须借助第三方插件。例如Flash播放器。
HTML5时代
随着移动互联网的兴起和HTML5标准的提出，浏览器有了原生播放音视频的能力。在手机浏览器和PC浏览器逐渐放弃对Flash的支持后，在使用HTML5标准播放音视频成为了主流。
MSE时代
由于浏览器的<video>和<audio>只支持有限格式的音视频，不支持之前Flash播放器时代广泛被使用的flv格式，以及缺少对请求状态，错误信息的直接读取等支持，W3C又推出了名为Media Source Extensions(MSE)的API，有了MSE之后，就可以使用flv.js等开源库来播放不被浏览器原生支持的flv格式。
二、基础知识
编码格式
图像的基本概念
- 图像分辨率：用于确定组成一幅图像的像素数据，指在水平和垂直方向上图像所具有的像素个数。
- 图像深度：存储每个像素所需要的比特数。
视频的基本概念
- 分辨率：每一帧的图像分辨率。
- 帧率：视频单位时间内包含的视频帧的数量。
- 码率：视频单位时间内传输的数据量。
I帧、P帧、B帧
- I帧：又被称为帧内编码帧。在进行视频解码时，I帧不依赖其他帧来进行解码。
- P帧：又被称为前向预测编码帧。在解码P帧时，必须先解码P帧的前一帧。
- B帧：又被称为双向预测编码帧。在解码B帧时，需要先解码B帧的前后2帧。
GOP(group of picture)
GOP是指两个I帧之间的间隔。
编码数据处理流程
预测(去除空间、时间冗余)->变换(去除空间冗余)->量化(去除视觉冗余)->熵编码(去除编码冗余)
封装格式
封装格式是存储音视频、图片或字幕信息的一种容器。
| 视频封装格式 | 视频文件格式 |
|---|---|
| Audio Video Interleave | AVI |
| Windows Media Video | WMV |
| Moving Picture Experts Group | MPG MPEG MP4 |
| Matroska | MKV |
| ... | ... |
多媒体元素和扩展API
<audio>和<video>元素的缺陷
- 不支持直接播放hls、flv等视频格式。
- 视频资源的请求和加载无法通过代码控制。
MSE的使用
- 创建mediaSource实例
- 创建指向mdeiaSource的URL
- 监听sourceopen事件
- 创建sourceBuffer
- 向sourceBuffer中加入数据
- 监听updateend事件
流媒体协议
| 协议名称 | 传输协议 | 封装格式 | HTML5 |
|---|---|---|---|
| HLS | HTTP | M3U8/TS | 支持 |
| HTTP-FLV | HTTP | FLV | 支持 |
| Dash | HTTP | FMP4 | 支持 |
| RTMP | TCP | FLV | 不支持 |
三、应用场景
- 点播
- 直播
- 云游戏
- 视频编辑
- 实时通信
- 图片
