这是我参与「第四届青训营」笔记创作活动的第8天。
12 Web多媒体入门
12.1 编码格式
图像基本概念
-
图像分辨率：用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。
-
图像深度:存储每个像素所需要的比特数。
- 图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。
- 例如,彩色图像每个像素用R,G,B三个分量表示,每个分量用8位，像素深度为24位，可以表示的颜色数目为2的24次方，既16777216个。
- 一副单色图像存储每个像素需要8bit,则图像的像素深度为8位，最大灰度数目为2的8次方，既256个。
视频基本概念
-
分辨率：每一帧的图像分辨率
-
帧率：视频单位时间内包含的视频帧的数量
-
码率：视频单位时间内传输的数据量，一般用kbps表示，即千位每秒。
-
I帧、P帧、B帧
- I帧：又称帧内编码帧，是一种自带全部信息的独立帧，无需参考其他图像便可独立进行解码
- P帧：又称帧间预测编码帧，需要参考前面的l帧或者P帧才能进行编码
- B帧：又称双向预测编码帧，也就是B帧记录的是本帧与前后帧的差别
- GOP(group of picture):两个I帧之间的间隔
编码数据处理流程
12.2 封装格式
封装格式：存储音视频、图片或者字幕信息的一种容器
12.3 多媒体元素和扩展API
video
<!DOCTYPE html>
<body>
<video src="./video.mp4" muted autoplay controls width=600 height=300></video>
<video muted autoplay controls width=600 height=300>
<source src="./vedio.mp4"><source>
</video>
</body>
</html>
audio
<!DOCTYPE html>
<body>
<audio src="./video.mp4" muted autoplay controls width=600 height=300></audio>
<audio muted autoplay controls width=600 height=300>
<source src="./vedio.mp4"><source>
</audio>
</body>
</html>
常用方法
属性
事件
缺陷
-
不支持直接播放hls、flv等视频格式
-
视频资源的请求和加载无法通过代码控制
- 分段加载(节约流量)
- 清晰度无缝切换
- 精准预加载
媒体源扩展API(Media Source Extensions)
- 无插件在web端播放流媒体
- 支持播放hls、flv、mp4等格式视频
- 可实现视频分段加载、清晰度无缝切换、自适应码率、精准预加载等
播放器播放流程
12.4 流媒体协议
HLS
- 全称是HTTP Live Streaming，是一个由Apple公司提出的基于HTTP的媒体流传输协议，用于实时音视频流的传输。
- 目前HLS协议被广泛应用于视频点播或直播领域。
