这是我参与「第四届青训营」笔记创作活动的的第8天

一. Web多媒体历史

flash
H5 video
MSE

二. 基础知识

1. 编码格式

🧩 图像基本概念

图像分辨率： 用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。如1920*1080（水平方向1920个像素、垂直方向1080个像素）。
**图像深度︰**图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如, 彩色图像每个像素用R,G,B三个分量表示,每个分量用8位,像素深度为24位可以表示的颜色数目为2的24次方，既16777216个﹔一副单色图像存储每个像素需要8bit，则图像的像素深度为8位，最大灰度数目为2的8次方，既256个。（图片的分辨率越大不一定所占据的存储空间越大，还要根据其图片深度占用位数）

🧩 视频基本概念

分辨率： 每一帧图像的分辨率（所有帧分辨率相同）。
帧率： 视频单位时间内包含的视频帧的数量。
码率： 指视频单位时间内传输的数据量，一般用kbps标签，即千位每秒。

🧩 视频帧基本概念

I帧： 关键帧。可以理解为这一帧画面的完整保留；I帧对视频压缩编码无需依赖其他的帧（因为包含完整画面)，只要有I帧自己的数据就能完全解码。
P帧： 前项预测编码帧。P帧没有完整画面数据，只有与前一帧的画面差别的数据；其解码要依赖前一帧（解码时需要用之前缓存的画面叠加上本帧定义的差别，生成最终画面），前一帧没解码自身也无法解码。

B帧： 双向差别帧。记录的是本帧与前后帧的差别（具体比较复杂，有4种情况）；其解码不仅要依赖前一帧，还要根据其后面的帧内容（不仅要取得之前的缓存画面，还要解码之后的画面，通过前后画面的与本帧数据的叠加取得最终的画面）。

GOP（Group Of Picture）： 一组完整的视频帧。一个GOP拿出来，必须能够完整的播放、显示。必须是以I帧开头，这样后面的P帧和B帧才能跟据前向参考帧进行解码显示。因此GOP是两个I帧之间的距离，Reference（参考周期）指两个P帧之间的距离。
DTS（Decoding Time Stamp）： 解码时间。这个时间戳的意义在于告诉播放器该在什么时候解码这一帧的数据。
PTS（Presentation Time Stamp）： 显示时间。这个时间戳用来告诉播放器该在什么时候显示这一帧的数据。

🧩 编码原因

假设存在一个图片，分辨率是1920*1080，则其未压缩的占用空间为：1920108024 / 8 = 6220800 Byte，大约5.9M；若帧率为30FPS，时长 90分钟，则占用空间为大小 933G，这样的存储空间是不能接受的。因此编码的意义是为了压缩视频视频大小，为了更好的进行视频传输和节约存储空间。视频是有很多冗余的，包括空间冗余、时间冗余、编码冗余、视觉冗余等。

空间冗余： 静态图像中存在的最主要的一种数据冗余。同一景物表面上采样点的颜色之间往往存在着空间连贯性，但是基于离散像素采样来表示物体颜色的方式通常没有利用这种连贯性。例如：图像中有一片连续的区域，其像素为相同的颜色，空间冗余产生。
时间冗余： 动画、视频和声音中经常包含的冗余。一组连续的画面之间往往存在着时间和空间的相关性，但是基于离散时间采样来表示运动图像的方式通常没有利用这种连贯性。例如：房间里的两个人在聊天，在这个聊天的过程中，背景(房间和家具)一直是相同的，同时也没有移动，而且是同样的两个人在聊天，只有动作和位置的变化。
编码冗余： 在某些场景中，存在着明显的图像分布模式，这种分布模式称作结构。图像中重复出现或相近的纹理结构，结构可以通过特定的过程来生成。例如：方格状的地板，蜂窝，砖墙，草席等图结构上存在冗余。
视觉冗余： 人类的视觉系统对图像的敏感性是非均匀和非线性的。对亮度变化敏感，而对色度的变化相对不敏感；在高亮度区，人眼对亮度变化敏感度下降；对物体边缘敏感，内部区域相对不敏感；对整体结构敏感，而对内部细节相对不敏感。可以根据这些视觉特性对图像信息进行取舍。主要在静态图像中存在。例如：人的视觉系统，对图像的任何变化，并不是都能感知的。人类一般的分辨能力为26灰度等级，图像一般采用28灰度等级，产生了视觉冗余。

🧩 编码数据处理流程

预测： 去除空间冗余和时间冗余。
变换： 去除空间冗余。
量化： 去除视觉冗余。
熵编码： 去除编码冗余。

编码格式

2. 封装格式

封装格式指存储音视频、图片或字幕信息的容器，便于存储传输。

3. 多媒体元素和扩展API

🧩 audio和video元素

在h5中，通过可以通过video标签和audio标签分别播放视频和音频。

audio和video的方法

play：开始播放音频/视频（异步的）
pause：暂停当前播放的音频/视频
load：重新加载音频/视频元素
canPlayType：检测浏览器是否能播放指定的音频/视频类型
addTextTrack：向音频/视频添加新的文本轨道

audio和video的属性

autoplay：设置或返回是否在加载完成后随即播放
control：设置或返回是否显示控件
currentTime：设置或返回视频/视频中的当前播放位置(以秒计)
duration：返回当前视频/音频的长度
src：设置或返回视频/音频的来源
volume：设置或返回视频/音频的音量TimeRanges对象
buffered：返回表示视频/音频已缓存部分的
playbackRate：设置或返回视频/音频的播放速度
error：返回表示错误状态的MediaError对象
readyState：返回当前的就绪状态

audio和video的事件

loadedmetadata：浏览器开始加载视频/音频时触发
canplay：浏览器可以开始播放视频/音频时触发
play：视频/音频暂停时触发
playing：在视频/音频在因缓冲而暂停或停止后已就绪时触发
pause：视频/音频暂停时触发
timeupdate：用于播放位置改变时触发
seeking：用于开始跳跃到视频/音频中的新位置时触发
seeked：用于已跳跃到视频/音频中的新位置时触发
waiting：视频由于缓冲下一帧而停止时触发
ended：播放列表已结束时触发

video和audio标签的缺陷

不支持直接播放hls、flv等格式视频
视频资源的请求和加载无法通过代码控制

- 分段加载（节约流量）
- 清晰度无缝切换（增强用户体验）
- 精确预加载（增强用户体验）

🧩 媒体源扩展MSE(Media Source Extensions)

无插件在Web端播放流媒体
支持播放hls、flv、mp4等格式视频
可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等

媒体源扩展API

创建mediaSource实例
创建指向mediaSource的URL
监听sourceopen事件
创建sourceBuffer
向sourceBuffer中加入数据
监听updateend事件

MSE播放流程

4. 流媒体协议

HLS： 全称是HTTP Live Streaming，是一个由Apple公司提出的基于HTTP的媒体流传输协议，用于实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域。在IOS段，只要把M3U8的地址直接赋给video标签的src，就可以直接播放。

三. 应用场景

Web多媒体：视频编辑、点播、直播、图片、云游戏、实时通信。

四. 新技术标准

Webassembly
WebCodecs
WebGPU
WebVR、WebXR

Web 多媒体入门 | 青训营笔记