这是我参与「第四届青训营 」笔记创作活动的第15天！今天学习《Web多媒体入门》，主要从Web多媒体历史、基础知识、应用场景以及总结与展望四个方面展开学习和整理。

Web多媒体历史

• 迅雷软件、HTML5、media source extensions等
• 视频音频播放的插件,格式限制，需要转换

基础知识

• 编码格式
• 封装格式
• 多媒体元素和扩展API
• 流媒体协议

图像基本概念

• 图像分辨率：用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。
• 图像深度：图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如，彩色图像每个像素用 R , G , B 三个分量表示，每个分量用8位，像素深度为24位，可以表示的颜色数目为 2的24次方，既16777216个；一副单色图像存储每个像素需要8bit，则图像的像素深度为8位，最大灰度数目为2的8次方，既256个。

编码格式

• 分辨率：每一帧的图像分辨率
• 帧率：视频单位内包含的视频帧的数量
• 码率：就是指视频单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒
• I帧、P帧、B帧
• GOP（group of picture）：两个I帧之间的间隔
• 冗余：
  • 空间冗余
  • 时间冗余
  • 编码冗余
  • 视觉冗余
• 编码数据处理流程
  • 预测————变换————量化————熵编码
    • 预测：去除空间冗余和时间冗余
    • 变换：去除空间冗余
    • 量化：去除视觉冗余
    • 熵编码：去除编码冗余

封装格式

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

多媒体元素和扩展API

• video、audio、MSE
• 媒体源扩展API
• MSE播放流程
• 播放器播放
  • 数据加载———解封装———重封装———appendBuffer———解码渲染——音视频同步
• mp4&fmp4

总结

• flash——H5 video——MSE
• 编码格式、封装格式、多媒体元素、流媒体协议
• 应用场景
• 新技术标准
  • Webassembly
  • WebCodecs
  • WebGPU
  • WebVR、WebXR