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

Sirarm
101 阅读2分钟

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

1. Web多媒体历史

  • flash（image.png） → html5（image.png） → MediaSourceExtensions

2. 基础知识

2.1 编码格式

  • 图像基本概念
    • 图像分辨率：用于确定组成一幅图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。
    • 图像深度：图像深度是存储每个像素所需要的比特数。图像深度决定了每个像素可能的颜色数，或可能的灰度级数。
  • 视频基本概念
    • 分辨率：每一帧的图像分辨率
    • 帧率：单位时间内包含的视频帧的数量
      • I帧：解码只依赖于本身，不依赖其他帧
      • P帧：前向预测解码帧，解码依赖前一帧的解码
      • B帧：双向预测解码帧，解码依赖与前一帧和后一帧

      • DTS:解码时间戳; BTS:显示时间戳

      • image.png
      • 解码顺序：①②③④⑤⑥
      • image.png
      • 解码顺序：①②④③⑥⑤
    • 码率：视频单位时间内传输的数据量，一般用kbps来表示，即千位每秒
    • GOP（group of picture）
      • 两个I帧之间的间隔image.png

为什么编码？

编码后的图片、视频能够节省空间；方便传输和存储。

编码前存在的问题

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

编码数据处理的流程

image.png

视频编码的发展

image.png

2.2封装格式

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

常用视频封装格式

image.png

2.3 多媒体元素和扩展API

image.png

<html>
<body>
    <video src ="./video.mp4" muted autoplay controls width=600 height =300></vedio>
<body>
<html>

audio 和 video 标签方法

image.png

audio 和 video 标签属性

image.png

audio 和 video 标签事件

image.png

audio 和 video 标签缺陷

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

媒体源扩展API（Media Source Extensions）

  • 无插件在web端播放流媒体
  • 支持hls、flv、mp4等格式视频
  • 可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等
  • 使用步骤：
    1. 创建mediaSource实例
    2. 创建指向mediaSource的URL
    3. 监听sourceopen事件
    4. 创建sourceBuffer
    5. 向sourceBuffer中加入数据
    6. 监听updateend事件

MSE的播放流程

image.png

播放器播放流程

image.png

流媒体协议

image.png

3. 应用场景

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

未来新技术标准

  • webassembly
  • webCodecs
  • webGPU
  • webVR、WebXR
avatar
文章
阅读
粉丝