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

Web多媒体

Web多媒体历史

• Flash插件：浏览器不支持音频和视频，因而使用第三方插件来实现
• HTML5：原生支持音视频播放，但是功能有效
  • 支持的视频格式少
  • 浏览器接管数据请求
• Media Source Extensions API：实现多视频格式播放
• 当前：MSE为主，标签为辅

编码格式

图像

图像分辨率：确定一副图像的像素数据，水平和垂直方向上图像具有的像素个数。

图像深度：存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数或可能的灰度级数。

视频

基本概念

分辨率：每一帧图像的分辨率。

帧率：视频单位时间内包含的视频帧的数量

码率：视频单位时间内传输的数据量，kbps表示，即千位每秒

编码格式

I帧：解码不依赖于其他帧。

P帧：解码依赖于它前一帧。

B帧：解码不仅依赖于它前一帧数，还依赖于后一帧。

DTS：解码时间戳。

PTS：显示时间戳。

GOP（group of picture）：两个I帧之间的间隔。

视频编码

视频编码的目的：缩小占用存储空间的大小。

视频编码的原理：去除冗余的数据。

• 空间冗余
• 时间冗余
• 编码冗余（例如只有两个颜色，没必要用很长的编码，1表示一种颜色，0表示另一种颜色）
• 视觉冗余（10像素和10000像素看起来有很大区别，但是10000像素和100000像素人眼看起来区别不大）

编码数据处理流程：

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

编码格式的发展历程

封装格式

封装格式：存储音视频、图片或字幕信息的一种容器。

多媒体元素

<video>标签和<audio>标签：

<!--第一种方式-->
<video src='...'></video>

<!--第二种方式-->
<video>
    <!--会逐一加载，直到找到一个能播放的-->
    <source src='...'></source>
    <source src='...'></source>
    <source src='...'></source>
</video>

对象的方法：

标签属性：

事件：

<audio>和<video>的缺陷：

• 不支持直接播放hls、flv等视频格式
• 视频资源的请求和加载无法通过代码控制
  • 分段加载
  • 清晰度无缝切换
  • 精确预加载

扩展API

媒体源扩展API（Media Source Extensions）

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

使用步骤：

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

流媒体协议

RTMP是Flash时期使用的协议，HLS（Http Live Streaming）是一个由Apple公司提出的基于Http的媒体流传输协议，用于实时音视频流的传输。目前HLS协议被广泛用于视频点播和直播领域。