这是我参与「第四届青训营」笔记创作活动的的第12天
Web多媒体
Web 多媒体历史
- Flash
- HTML
- Media Source Extensions
基础知识
编码格式
主流编码格式
H.262/MPEG-2 、H.264/AVC 、H.265/HEVC 、H.266/VVC
图像基本概念
图像分辨率︰用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数
图像深度︰图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如，彩色图像每个像素用R,G,B三个分量表示,每个分量用8位，像素深度为24位，可以表示的颜色数目为2的24次方，既16777216个﹔一副单色图像存储每个像素需要8bit，则图像的像素深度为8位，最大灰度数目为2的8次方，既256个
视频基本概念
分辨率∶每一帧的图像分辨率 帧率:视频单位时间内包含的视频帧的数量 码率︰就是指视频单位时间内传输的数据量,一般我们用kbps来表示，即千位每秒
I帧：I帧或关键帧或帧内帧（I-frame or Key-Frame or Intra-frame）仅由帧内预测的宏块组成
P帧：P帧代表预测帧，除了空域预测以外，它还可以通过时域预测来进行压缩。P帧参考前面的帧进行运动估计
B帧：B帧可以参考在其前后出现的帧。B帧中的B就代表双向（Bi-Directional）
GOP（group of picture）：两个l帧之间的间隔
为什么要编码？
压缩存储空间：空间冗余、时间冗余、编码冗余、视觉冗余
编码数据处理流程
预测（去除空间冗余、时间冗余） -> 变换（去除空间冗余） -> 量化（去除视觉冗余） -> 熵编码（去除编码冗余）
封装格式
多媒体元素和扩展 API
和元素缺陷
-
不支持直接播放 hls、flv 等视频格式
-
视频资源的请求和加载无法通过代码控制
- 分段加载(节约流量)
- 清晰度无缝切换
- 精确预加载
媒体源扩展APl (Media Source Extensions)
- 创建 mediaSource 实例
- 创建指向 mediaSource 的URL
- 监听 sourceopen 事件
- 创建 sourceBuffer
- 向 sourceBuffer 中加入数据
- 监听 updateend 事件
播放器播放流程
数据加载 -> 解封装 -> 重封装 -> appendBuffer -> 解码渲染 -> 音视频同步
流媒体协议
HLS 全称是 HTTP Live Streaming，是一个由 Apple 公司提出的基于 HTTP 的媒体流传输协议，用于实时音视频流的传输。目前 HLS 协议被广泛的应用于视频点播和直播领域。
应用场景
Web多媒体：图片、直播、点播、视频编辑、实时通信、云游戏
