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

用户8554144141688
82 阅读4分钟

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

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

1 Web多媒体历史

多媒体：文字、图片、音频、视频等等形式。

Web多媒体发展历程：

  1. PC为主的时代，多基于第三方插件，如：Flash播放器等副客户端（音频和视频的播放依赖于这些插件）；
  2. 移动互联网时代，Flash插件慢慢被淘汰了，HTML5可以原生支持播放音视频，但是浏览器自带的这些标签功能有限，只能通过将格式转换等方式；
  3. 推出了Media Source Extensions 媒体资源扩展API，可以实现多音视频格式的播放了，再以标签为辅助。

HTML5 规定了一种通过 video 、audio元素来包含视频、音频的标准方法。相较于以前的Flash插件提高了便利性。

2 基础知识

  • 01. 编码格式

视频的基本组成单元是一幅幅的图像。

图像的基本概念：

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

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

视频的基本概念：

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

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

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

视频帧的分类：I帧、P帧、B帧。 I帧：帧内编码帧，视频的压缩不依赖于其他任何帧。 P帧：前向预测编码帧，它的解码要依赖于它前一帧的图片。 B帧：双向预测编码帧，不仅依赖于它前面的参考帧也依赖于后面的参考帧。

image.png

DTS: 解码时间戳，主要用于视频的解码，在解码阶段使用。

PTS: 显示时间戳，主要用于度量解码后的视频帧什么时候被显示出来。

GOP(group of picture): 两个I帧之间的间隔。（并不是I帧越多越好）

视频编码是为了将视频中不相关的、冗余的数据进行去除和压缩。（空间冗余、编码冗余、视觉冗余）

编码数据处理流程： 预测->变换->量化->熵编码

image.png 预测：帧内预测、帧间预测。

  • 02. 封装格式 封装格式：存储音视频、图片或者字幕信息的一种容器。 封装&便于存储和传输

image.png

image.png

  • 03. 多媒体元素和扩展API

<video>元素、<audio>元素、MSE扩展API 用法例如：引入<video>元素，然后让其src指向视频地址即可。

image.png 可以通过设置标签属性：

image.png

<audio>和<video>元素缺陷：

1） 不支持直接播放hls、flv等视频格式;

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

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

媒体源扩展API（Media Source Extensions）:

1.创建mediaSource实例
2.创建指向mediaSource的URL
3.监听sourceopen事件
4.创建sourceBuffer
5.向sourceBuffer中加入数据
6.监听updateend事件

image.png

  • 04. 流媒体协议

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

大致播放流程：

image.png

3 应用场景

  • 点播
  • 直播
  • 图片
  • 云游戏
  • 实时通信
  • 视频编辑

4 个人总结与体会

针对于Web多媒体方面的知识学到了很多，收获满满！

学习了Web多媒体的发展历程（三个阶段）：flash-> H5 video -> MSE扩展API。

基础知识中学习了编码格式、封装格式，以及如何运用多媒体元素实现，还有流媒体协议，具体看了HLS协议。

还了解了应用场景包括点播、直播、图片、云游戏、实时通信、视频编辑等.

新技术标准：

  • Webassembly
  • WebCodecs
  • WebGPU
  • VebVR、WebXR
avatar
文章
阅读
粉丝