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

Web多媒体入门

01.Web多媒体历史

• 第一阶段：依靠插件，代表是flash

• 移动互联网阶段：不支持flash，推出h5支持音视频，但支持很有限

• w3c推出Media Source Extension，适应更多场景

02.基础知识

01.编码格式

• 图像基本概念

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

• 视频基本概念

  • 分辨率：每一帧的图像分辨率
  • 帧率：视频单位时间内包含的视频帧的数量
  • 码率：就是指视频单位时间内传输的数据量，一般我们用kpbs来表示，即千位每秒

• 视频帧：I帧、P帧、B帧

  • I帧：不依赖于其它帧
  • P帧：前向预测编码帧
  • B帧：双向预测编码帧
  • GOP：(group of picture)：两个I帧之间的间隔

• 视频编码：

  • 空间冗余
  • 时间冗余
  • 编码冗余
  • 视觉冗余

  编码数据处理流程：

02.封装格式

指存储音视频、图片和字幕的一种容器

03.多媒体元素和拓展API

• video
• audio
• MSE

---

video和audio元素方法：

• play
• pause
• load
• canPlayType
• addTextTrack

---

video和audio元素属性：

• autoplay
• controls
• currentTime
• duration
• src
• volumne
• buffered
• playbackRate
• error
• readyState

---

video和audio元素事件：

• loadmetadata
• canplay
• play
• playing
• pause
• timeupdate
• seeking
• seeked
• waiting
• ended

---

audio和video元素缺陷：

• 不支持直接播放hls、flv等视频格式

• 视频资源的请求和加载无法通过代码控制

  • 分段加载（节约流量）
  • 清晰度无缝切换
  • 精准预加载

MSE

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

04.流媒体协议

HLS 全称是 HTTP Live Streaming，是一个由 Apple 公司提出的基于 HTTP 的媒体流传输协议，用于实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域。

03.应用场景

04.总结与展望

• flash->H5 video->MSE

• 编码格式、封装格式、多媒体元素、流媒体协议

• 应用场景

  展望：

新技术标准：

• Webassembly
• WebCodecs
• WebGPU
• WebVR、WebXR