Web多媒体入门｜青训营笔记这是我参与「第四届青训营」笔记创作活动的第15天 Web多媒体历史 Flash 浏览器

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

Web多媒体历史

Flash
- 浏览器不支持直接播放音视频，需要额外插件如Flash
HTML5
- 新增<audio> <video> 等标签
Media Source Extensions
- 应对音视频标签功能不够完善灵活的情况

基础知识

编码格式
- 图像基本概念
  - 图像分辨率
    - 用于确定组成一幅图像的像素数据
  - 图像深度
    - 存储每个像素所需的比特数
- 视频基本概念
  - 分辨率
    - 每一帧的图像分辨率
  - 帧率
    - 视频单位时间内包含的视频帧的数量，常用25~30fps
  - 码率
    - 视频单位时间内传输的数据量，一般用kbps即千位每秒表示
  - 视频帧
    - I帧
      - 帧内编码帧（关键参考帧），是一种自带全部信息的独立帧，无需参考其他图像便可独立进行编码
    - P帧
      - 帧间预测编码帧，需要参考前面的I帧或者P帧才能进行编码
    - B帧
      - 双向预测编码帧，记录的是本帧与前后帧的差别
  - PTS和DTS参考资料
  - GOP
    - group of picture
    - 两个I帧之间的间隔
    - I帧太多会占用过多空间
    - I帧太少时，因为每次跳到某一位置都要从前面I帧开始，解码会比较耗时
    - 一般GOP在2秒~4秒之间
编码的意义：节省空间，便于存储和传输
编码的基本原理：利用各种冗余
- 空间冗余：大块像素完全一样
- 时间冗余：前后两个帧差别不大
- 编码冗余：只有两个颜色，颜色编码可以只用1位
- 视觉冗余：人类视觉系统有限，对部分颜色和一些高频信号不敏感
视频编码数据处理流程
- 预测：去除空间冗余和时间冗余
  - 帧内预测
  - 帧间预测
- 变换：去除空间冗余
- 量化：去除视觉冗余
- 熵编码：去除编码冗余
视频编码格式
- 主流格式：H.262 / H.264 / H.265 / H.266
  - H.262/MPEG-2: 数字电视 VCD DVD光盘
  - H.264/AVC: 各大视频网站PC端
  - H.265/HEVC: 各大视频网站手机端和4K视频，压缩率比AVC几乎高一倍
  - H.266/VVC: VR等穿戴设备 8K视频
- VP9 / VP10 / AV1
  - 对标H.265，不收专利费
- AVS / AVS+ / AVS2 / AVS3
  - AVS3对标H.265
  - 国内自行研发的编码
封装格式
- 存储音视频、图片或字幕信息的一种容器
- 常用格式
  - AVI
  - WMV
  - MPEG（MPG MPEG VOB DAT 3GP MP4）
    - MPEG-1/2/4
  - Matroska（MKV）
  - Real Video（RM RMVB）
  - QuickTime File Format（MOV）
  - Flash Video（FLV）
多媒体元素和扩展API
- video标签和audio标签
  - 缺点
    - 不支持直接播放hls/flv等视频格式
    - 视频资源的请求和加载无法直接通过代码控制，如分段加载、无缝切换清晰度、精确预加载等
- MSE
  - 目前iOS上的Safari暂不完全支持
  - 使用过程
    - 创建mediaSource示例
    - 创建指向mediaSource的URL
    - 监听sourceopen事件
    - 创建sourceBuffer
    - 向sourceBuffer中加入数据
    - 监听updateend事件
  - 播放流程
    - 数据加载
    - 解封装
    - 重封装至fmp4
    - appendBuffer
    - 解码渲染
    - 音视频同步
- mp4和fmp4
  - mp4文件结构
    - ftyp
    - free
    - mdat // 所有音视频裸流数据
    - moov // 封装信息/元数据信息
      - mvhd
      - trak
      - udta
  - fmp4文件结构
    - ftyp
    - moov
    - moof-(1) // 多个moof和mdat，流式播放友好
    - mdat
    - moof-(2)
    - mdat
    - moof-(3)
    - mdat

<!--video标签的两种写法-->
<video src="xxx.mp4" muted autoplat controls width=640 height = 480></video>
<video muted autoplat controls width=640 height = 480>
	<!--可以嵌套多个source标签-->
	<source src="xxx.mp4"></source>
</video>
<!--audio标签的写法: 把video换成audio，其余用法一样-->

属性	描述
autoplay	加载完成后自动播放
controls	显示播放暂停等控件
currentTime	设置或返回以秒为单位的当前播放位置
duration	返回当前音视频的长度
src	当前音视频来源
volume	音量
buffered	返回表示音视频已缓冲部分的TimeRanges对象
playbackRate	播放速度
error	返回表示音视频错误状态的MediaError对象
readyState	返回音视频当前的就绪状态

方法	描述
play()	开始播放(异步方法)
pause()	暂停
load()	重新加载(在重新赋值src后调用)
canPlayType()	检测浏览器是否能播放指定类型
addTextTrack()	添加新的文本轨道

事件	触发条件
loadedmetadata	浏览器已加载音视频的元数据
canplay	浏览器可以开始播放音视频
play	音视频已开始或不再暂停
playing	音视频因缓冲而暂停或停止后已就绪
pause	音视频已暂停
timeupdate	目前播放位置已更改
seeking	用户开始移动或跳跃到音视频中的新位置
seeked	用户已移动或跳跃到音视频中的新位置
waiting	视频由于需要缓冲下一帧而停止
ended	目前的播放列表已结束

流媒体协议
- HLS
  - M3U8
    - 主播放列表
    - 媒体播放列表

协议名称	传输协议	封装格式	HTML5支持
HLS	HTTP	M3U8(索引文件)/TS	支持
HTTP-FLV	TTP	FLV	支持
Dash	HTTP	FMP4	支持
RTMP	TCP	FLV	不支持

新技术标准
- WebAssembly
  - 比如用C++在PC端软解H.265
- WebCodecs
  - 暴露音视频解码api给前端
- WebGPU
  - 暴露底层GPU能力给前端
- WebVR WebXR

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

Web多媒体历史

基础知识

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