这是我参与「第四届青训营 」笔记创作活动的第15天。
基础知识
编码格式
图像基本概念
图像分辨率: 水平和垂直方向上图像所具有的像素个数
图像深度: 存储每个像素所需要的比特数
视频基本概念
分辨率: 每一帧的图像分辨率
帧率: 视频单位时间内包含的视频帧的数量
码率: 视频单位时间内传输的数据量
为什么要编码
空间冗余、时间冗余、编码冗余、视觉冗余
编码数据处理过程
预测(去除时间、空间冗余) ——> 变换(去除空间冗余) ——> 量化(去除视觉冗余) ——> 熵编码(去除编码冗余)
封装格式
存储音视频、图片或者字幕信息的一种容器。
多媒体元素和扩展API
<video>元素
<audio>元素
缺陷:
- 不支持直接播放hls、flv等视频格式
- 视频资源的请求和加载无法通过代码控制
MSE(Media Source Extensions)
即媒体源扩展,可以理解为一种API,其提供了实现无插件且基于 Web 的流媒体的功能。通过 MSE,媒体串流能够通过 JavaScript 创建,并且可以使用 HTML5 的 <audio> 和 <video> 标签进行播放。
- 无插件在web端播放流媒体
- 支持播放hls、flv、mp4等格式视频
- 可实现视频分段加载、清晰度无缝切换、自适应编码、精确预加载
播放器播放流程
数据预加载 ——> 解封装(音频裸流、视频裸流) ——> 重封装 ——> appendBuffer ——> 解码渲染 ——> 音视频同步(时间戳)
流媒体协议
HLS 全称是 HTTP Live Stream,是一个由 Apple 公司 提出的基于 HTTP 的媒体流传输协议,用于实时音视频流的传输。目前广泛运用于视频点播和直播领域。
应用场景
Web多媒体技术可以应用于点播、直播、图片、云游戏、实时通信、视频剪辑等方向。
新技术标准
Webassembly
WebCodecs
WebGPU
WebVR、WebXR