Web多媒体 | 青训营笔记

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

Web多媒体历史

• flash插件
• HTML5原生自带音视频标签
• Media Source

基础知识

• 编码格式
  • 要解决的问题：
    • 空间冗余
    • 时间冗余
    • 编码冗余
    • 视觉冗余
  • 编码数据处理流程
    1. 预测--去除空间冗余、时间冗余
    2. 变换--去除空间冗余
    3. 量化--去除视觉冗余
    4. 熵编码--去除编码冗余
• 封装格式--存储音视频、图片或者字幕信息的一种容器
• 多媒体元素和扩展API
  • video
  • audio
  • audio&video元素缺陷
    • 不支持直接播放hls、flv等视频格式
    • 视频资源的请求和加载无法通过代码控制
      • 分段加载（节约流量）
      • 清晰度无缝切换
      • 精确预加载
  • 媒体扩展源API--MSE（Media Source Extensions）
    • 优点：
      • 无插件在web端播放流媒体
      • 支持播放hls、flv、mp4等格式视频
      • 可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载
    • 使用过程
      1. 创建mediaSource实例
      2. 创建指向mediaSource的URL
      3. 监听sourceopen事件
      4. 创建sourceBuffer
      5. 向sourceBuffer中加入数据
      6. 监听updateend事件
    • 播放器播放流程
      1. 数据加载：ts、flv、mp4
      2. 解封装：音频裸流、视频裸流
      3. 重封装：fmp4
      4. appendBuffer：video、audio
      5. 解码渲染：音频解码、视频解码
      6. 音视频同步：时间戳
  • 流媒体协议 HLS全称是HTTP Live Streaming，是一个由Apple公司提出的基于HTTP的媒体流传输协议，用于实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域。

应用场景

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

新技术标准

• Webassembly：PC端使用265视频编码
• WebCodecs：前端对数据音频视频实现编码解码
• WebGPU：底层应用绘图暴露接口
• WebVP、WebXR

引用参考

Web 多媒体入门 .pptx