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

yanghi
144 阅读5分钟

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

1. Web多媒体历史

  1. 最开始网页上只能浏览文字和图片，我们只能使用播放插件来进行音视频的播放 如flash(1994-2020) draemweaver fireworks插件
  2. 2014年，HTML5定稿，出现标签<audio><video> 支持在网页上原生的播放音视频并进行一定的控制
  3. 由于<audio><video>控制的不足，出现了 Media Source Extensions 媒体资源扩展API

2. 基础知识

2.1 编码格式

图像基本概念

图像分辨率：用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。

图像深度：图像深度是指存储每个像素所需要的比特数。图像深度决定了用图像的每个像素可能的颜色数或可能的灰度级数。例如，彩色图像每个像素用R,G,B三个分量表示，每个分量用8位表示，像素深度为24位，可以表示的颜色数目为2的24次方，即16777216个；一副单色图像存储每个像素需要8bit，则图像的像素深度为8位，最大灰度数为2的8次方，既256个。

视频基本概念

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

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

码率：就是指视频单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒。

视频帧的分类

分为 I帧、P帧、B帧：

  • I帧又称帧内编码帧，是一种自带全部信息的独立帧，无需参考其他图像便可独立进行解码
  • P帧又称帧间预测编码帧，需要参考前面的I帧或者P帧才能进行编码
  • B帧又称双向预测编码帧，也就是B帧记录的是本帧与前后帧的差别

如何读取帧？

  1. 第一幅图先读取I帧，P帧再参考I帧进行编码，之后P帧参考前一个P帧进行编码，依次类推，顺序是1，2，3，4，5，6。

  2. 第二幅图先读取I帧，P帧再参考I帧进行编码，在读取第4帧P帧，再读取B帧参考2、4帧的P帧，依次类推，顺序是1，2，4，3，6，5。

GOP （group of picture） ：

  • 两个I帧之间的间隔

为什么要编码？

假如该张图片是：1920X1080的分辨率，位图深度为24，那么它的大小为 1920X1080x24/8 = 6220800Byte （5.9M）。

假如有一段视频每一帧都是这张图片，帧率为30FPS，时长为90分钟，那么它的大小为30x60x90x5.9M=933G 。

那么不进行编码的话，可想而知，我们的设备存储不了几张图片，甚至视频都存不上去。

进行编码需要做什么？

处理空间冗余 从这张图片里边可以看出这部分区域的颜色一致，难道我们还傻乎乎的存储一遍，不，我们要做的是通过一个变量记录颜色一致的区域，只存储一次即可。

处理时间冗余 你会发现第N帧和第N+1帧的视频帧中大部分区域的图像一致，只是被击球的位置不同，那么可以把图像一致的区域进行存储，不一致的进行存储。

处理编码冗余 这张图片只有蓝色和白色，那么我们还把每个像素（假设每个像素24像素深度）进行存储吗，我们可以换种思路，把蓝色像素作为1进行存储，白色像素作为0进行存储，这样会大大节省存储空间。

处理视觉冗余 人的视觉对有些颜色是看不见的以及对高频的图像不太敏感，我们去除这些后，图片从286KB压缩为11KB，但看起来没有区别。

编码数据处理流程

编码格式

2.2 封装格式

如何对数据进行传输？

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

经常用的视频分装格式

2.3 多媒体元素和扩展API

通过多媒体元素和扩展API进行视频播放

首先介绍多媒体元素：

<video>标签-播放视频

<audio>标签 播放音频

<audio>和<video>标签 方法

<audio>和<video>元素 属性

<audio>和<video>元素 事件

<audio>和<video>元素 缺陷

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

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

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

接下来介绍多媒体元素和扩展API （Media Source Extensions）

MSE支持：

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

使用MSE步骤

MSE播放流程

播放器播放流程

mp4和fmp4的比较

mdat 存储所有视频和音频的裸流数据

moov 封装的数据，称为元数据

多个moof、mdat对流媒体播放支持较好

2.4 流媒体协议

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

HLS播放流程

M3U8

3. 应用前景

4. 总结与展望

总结

  • Flash -> H5 Video -> MSE
  • 编码格式、封装格式、多媒体元素、流媒体协议
  • 应用场景

新技术

  • Webassembly
  • WebCodecs 前端对音频和视频进行编码和解码
  • WebGPU 使用底层的GPU
  • WebVR、WebXR 针对元宇宙
avatar
文章
阅读
粉丝