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

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

前言

• 通过本节课主要是对Web多媒体引用进一步了解，不在是刚开始仅仅局限于音视频标签的使用，而是对其Web多媒体的发展历程以及一些基础知识，帮助Web多媒体入门，了解更多的知识。

1. 编码格式

   图像基本概念

   • 图像分辨率
   • 图像深度

   视频基本概念

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

   编码格式

   • I帧、P帧、B帧

   • GOP:两个I帧之间的间隔

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

   • 编码数据处理流程

     1. 预测：去除弓箭冗余、时间冗余
     2. 变换：去除空间冗余
     3. 量化：去除视觉冗余
     4. 熵编码：去除编码冗余

2. 封装格式

   封装格式： 存储音视频、图片或者字母信息的一种容器

1. 多媒体元素和扩展API

   • video
   • audio

   video和audio缺陷

   • 不支持直接波峰hls、flv等视频格式

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

     • 分段加载（节约流量）
     • 清晰度无缝切换
     • 精确预加载

   媒体源扩展API（Media Source Extensions

   描述：

   • 无插件在web端播放流媒体
   • 支持hls、flv、mp4等格式视频
   • 可实现视频分段加载，清晰度无缝切换、自适应码率、精确预加载等

   使用：

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

   播放器播放流程

   1. 数据加载
   2. 解封装
   3. 重封装
   4. appdendBuffer
   5. 解码渲染
   6. 音频同步

   流媒体协议

Web多媒体引用场景

-   点播
-   直播
-   视频剪辑
-   实时通信
-   云游戏
-   图片