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

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

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

Web多媒体历史

1. Flash
2. H5
3. Media Source Extensions

基础知识

编码格式

图像基本概念

• 图像分辨率：用于确定组成一幅图像的像素数据，就是指在水平和垂直方向上的图像具有的像素个数
• 图像深度：图像深度是指存储每个像素所需要的比特数

视频基本概念

• 分辨率：每一帧图像的分辨率
• 帧率：单位时间内包含的视频帧的数量
• 码率：视频单位时间内传输的数据量，一般用kbs表示，即千位每秒

视频帧

• I帧：帧内编码帧，该帧的压缩解码不依赖于视频内的任何帧，占用空间较大
• P帧：前向预测编码帧，依赖于前一帧
• B帧：双向预测解码帧，依赖于前一帧和后一帧解码
• GOP：两个I帧之间的间隔，间隔小解码更耗时，间隔大空间大

视频编码

• 空间冗余

• 时间冗余

• 编码冗余

• 视觉冗余

处理流程

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

编码格式

封装格式

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

多媒体元素和扩展API

video/audio

• 使用
• 方法

• 事件

• 缺陷

  • 不支持直接模仿hls、flv等视频格式

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

    • 分段加载(节约流量)
    • 清晰度无缝衔接
    • 精确预加载

媒体源扩展API

• 无插件在Web端播放流媒体

• 支持播放hls、flv、MP4等格式视频

• 可实现视频分段加载、清晰度无缝衔接、自适应码率、精确预加载等

• 兼容性

  

• 使用

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

• MSE播放流程

  • 

• 播放器播放流程

  • 1. 数据加载(ts、flv、mp4)
    2. 解封装(音频裸流、视频裸流)
    3. 重封装(fmp4)
    4. appendBuffer(video、audio)
    5. 解码渲染(音频解码、视频解码)
    6. 音视频同步(时间戳)

• mp4和fmp4

  • 文件结构

    • mp4

- fmp4

流媒体协议

应用场景

新技术标准

• Webassembly
• WebCodecs
• WebGPU
• VebVR、VebXR

总结

这节课听的有点虚，但是毫无疑问多媒体的发展对于web前端开发者也是一个非常重要的领域之一，在web技术初期我们只需要展示超文本，到现在丰富的音频网站都离不开Web多媒体的发展。