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

白阿白
116 阅读5分钟

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

一、讲了什么：

  • Web多媒体历史
  • 基础知识
  • 应用场景
  • 新技术标准
  • 总结

二、Web多媒体历史：

graph LR
Flash/1994 --> HTML5/2014 --> MSE

其中Flash我们肯定知道，可MSE是什么呢？
简单来说：

  • 它可以实现拆分/合并数个缓冲文件，让页面播放的视频文件无法下载
  • 让服务端提供多份码率的媒体流，可以根据用户的网络进行码率自适应

Flash：ios不支持Flash / 逐渐被弃用
HTML5：是对 HTML 标准的第五次修订
MSE：Media Source Extensions（流媒体播放）

拓展阅读1：MSE (Media Source Extensions) 上手指南 - 掘金 (juejin.cn)

三、基础知识：

编码格式

图像和视频

一些基础概念如下，

  1. 图像：

  • 分辨率

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

  • 深度

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

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

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

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

I帧、P帧、B帧

  • I帧：关键参考帧，无需参考其他图像便可独立进行解码（只需考虑本帧）

  • P帧：前面的I帧解码后才解码，依赖于I帧（记录的是与前一帧的差别）

  • B帧：双向依赖参考帧，第2和第4帧P帧被解码出来才能解码B帧!（记录前一帧及后一帧的差别）

  • 注意B帧和P帧的区别

拓展阅读2：视频编码之I帧 、P帧、B帧 - 简书 (jianshu.com)

GOP（group of picture）

一个GOP就是一组连续的画面，大概是两个I帧之间的间隔。

编码器将多张图像进行编码后生产成一段一段的 GOP ( Group of Pictures ) ， 解码器在播放时则是读取一段一段的 GOP 进行解码后读取画面再渲染显示。

为什么要编码？

肯定是不编码有坏处嘛，哪些坏处呢？

  • 空间冗余
  • 事件冗余
  • 编码冗余
  • 视觉冗余

处理流程

graph LR
预测 --> 变换 --> 量化 --> 熵编码

  • 预测：去除空间冗余和时间冗余

  • 变换：去除空间冗余

  • 量化：去除视觉冗余

  • 熵编码：去除编码冗余

格式发展

封装格式

概念：存储音视频、图片或者字幕信息的一种容器

多媒体元素和拓展API（重点!!!）

<video>元素

<audio>和<video>元素

包括

所以就要用到媒体源拓展API咯

👇👇👇👇👇👇👇

媒体源拓展API

创建过程：

  • 1.创建mediaSource实例\

  • 2.创建指向mediaSource的URL\

  • 3.监听sourceopen:事件\

  • 4.创建sourceBuffer\

  • 5.向source Buffer中加入数据\

  • 6.监听updateend事件

播放器播放流程

mp4和fmp4

fmp4对流式播放支持的好

流媒体协议

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

以及：

四、应用场景：

  • 直播和点播的区别：点播的mp4不是流式媒体，不能作为直播的封装格式。
  • 云游戏：所有游戏都在端运行，并将渲染完毕后的游戏画面压缩后通过网络传送给用户。

五、一些新的技术标准：

  • WebAssembly：一种新的编码方式，使得以各种语言编写的代码都可以以接近原生的速度在 Web 中运行
  • WebCodecs API：提供了我们访问底层编码解码接口的能力，可以更深入的进行web音视频开发
  • WebGPU：更好地支持多线程
  • VebVR、WebXR：较早的 WebVR API 仅设计为支持虚拟现实（VR），而 WebXR 在 Web 上同时支持 VR 和增强现实（AR）。WebXR 增强现实模块增加了对 AR 功能的支持。

六、课后个人总结：

  • 本章有什么知识点不容易掌握？
    感觉看了半天，有用的点主要是要了解<video>、<audio>以及MSE的应用， 还知道了为什么Web里的有些视频不能下载。
    然后还了解了一些新的技术标准！

七、引用参考：

拓展阅读1：MSE (Media Source Extensions) 上手指南 - 掘金 (juejin.cn)

拓展阅读2：视频编码之I帧 、P帧、B帧 - 简书 (jianshu.com)

<video>标签：<video> 视频嵌入元素 - HTML（超文本标记语言） | MDN (mozilla.org)

<audio>标签：<audio> - HTML（超文本标记语言） | MDN (mozilla.org)

avatar
文章
阅读
粉丝