Web多媒体笔记
参加字节跳动的青训营时写的笔记。这部分是刘立国老师讲的课。
1. 前置知识
1.1 图像基本概念
图像分辨率：图像的像素数据，指在水平和垂直方向上图像所具有的像素个数
图像深度：指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度数(单色图像)。例如彩色图像每个像素用R, G, B三个分量来表示，每个分量用8为所以像素深度是24位，可以表示的颜色数目是224。单色图像每个像素需要8位，则图像的像素深度是8位，灰度数目为28。
图像的大小不仅要看图像的分辨率，还要看图像深度
1.2 视频基本概念
分辨率：每一帧的图像分辨率
帧率：视频单位时间内包含的视频帧的数量
码率：视频单位时间内传输的数据量，一般用kbps(千位每秒)表示。
视频的大小不仅要看图像的分辨率，还要看码率
2. 编码
2.1 为什么需要编码
如果不编码：
假设一部电影的每一帧的分辨率都是1920 × 1080。
那么每一帧的大小为1920 * 1080 * 24 / 8 = 6220800 byte = 5.9M (24就是上面的图像像素深度)
假设帧率为30FPS，时长为90分钟，那么这部电影大小就是 5.9 * 30 * 60 * 90 = 933G(我的电脑竟一部电影都下不了)
2.2 DTS和PTS
DTS：解码时间戳，用来告诉播放器该在什么时候解码这一帧的数据
PTS：显示时间戳，用来告诉播放器该在什么时候显示这一帧的数据。
I帧：帧内编码帧、关键帧，不需要参考其他帧。
P帧：前向预测编码帧。P帧由它的前一P帧或I帧预测而来。
B帧：双向预测内插编码帧。B帧由它的**前一帧以及后一帧预测而来。
实例：
首先，PTS是1、2、3、4、5、6
因为P帧需要由前一P帧或I帧预测而来，I帧不需要参考其他帧。所以先解码第1帧，解码完第1帧后，第2帧的P帧才可以解码，依次类推。所以，DTS是1、2、3、4、5、6
首先，PTS是1、2、3、4、5、6
由上一个例子，依次解码第1帧、第2帧，想继续解码第3帧，发现第3帧是B帧，所以就去解码第3帧的后一帧(第4帧)，所以DTS的前面部份是1、2、4、3。同理，解码第5帧又会先去解码第6帧。所以，DTS是1、2、4、3、6、5
2.3 GOP
GOP(group of picture)：两个I帧之间的间隔
每个group的第一帧是I帧(关键帧)，每个GOP内的帧的解码不依赖于其他GOP的帧。
GOP一般2到4s。首先，I帧是帧内压缩，占用存储空间大。所以I帧不适宜过多。如果I帧太少，也不行。比如一共有1000帧，我需要解码第500帧，如果只有一个I帧，则要解码第1帧、第2帧…第499帧。(这个场景可能是用户点击进度条时)
2.4 各种冗余
2.4.1 空间冗余
重复的只存储一次
2.4.2 时间冗余
只多存储有变化的
2.4.3 编码冗余
不同像素值出现的概率不同，概率高的用的字节少，概率低的用的字节多(霍夫曼编码)
上面的demo：每一个像素值需要24位。上面例子，蓝色用1表示，白色用0表示。则只需要2位。
2.4.4 视觉冗余
人的视觉系统对某些细节不敏感，所以可以把人眼看不到的部分去除掉。
2.5 编码流程
2.6 编码格式
3. 封装
封装格式的主要作用是把视频码流和音频码流按照一定的格式存储在一个文件中。(可能还有字幕信息)
4. 多媒体元素和扩展API
4.1 video和audio
<body>
<button onclick="getLength()">获取视频长度</button>
<p></p>
<video src="http://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4" width="540px" controls muted autoplay></video>
<script>
let v = document.getElementsByTagName("video")[0]
v.playbackRate = "1.5"
function getLength() {
let length = Math.floor(v.duration)
let minute = Math.floor(length / 60)
let second = length % 60
document.getElementsByTagName("p")[0].innerHTML = `视频长度为${minute}分${second}秒`
}
</script>
</body>
除了上面的形式还可以用下面的source的形式，这样就可以添加多个不同格式的视频。当浏览器不支持时，可以换一个。
audio和video类似就不多说了。
缺陷：
- 不支持直接播放hls、flv等视频格式
- 视频资源的请求和加载无法通过代码控制
- 分段加载(节省流量)
- 清晰度无缝切换
- 精确预加载
4.2 MSE
媒体源扩展API(Media Source Extensions)
- 无插件在web端播放流媒体
- 支持hls、flv、mp4等格式视频
- 可实现视频分段加载、清晰度无缝切换、自适应码率、精确加载
4.2.1 使用
4.2.2 MSE播放流程
4.3 播放器播放流程
5. 流媒体协议
流媒体是指将一连串数据压缩后，经过网络分段发送，即时传输以供观看音视频的一种技术。
流媒体协议是一种标准化的传递方法，用于将视频分解为多个块，将其发送给视频播放器，播放器重新组合播放。
例子：HLS(HTTP Live Streaming)，是Apple公司提出的基于HTTP的媒体流传输协议，用于实时音视频流的传输。目前被广泛用于视频点播和直播领域。
6. 应用场景
