Web多媒体入门 | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的第17天 与大家分享Web多媒体的知识，包括Web多媒体的基础知识及应用实战，不足之处欢迎大家批评指正！
01 Web多媒体历史
web多媒体的发展经历了三个阶段
- Flash:1994年开始——2020
网页三剑客：flash draemweaver fireworks 播放插件
Flash下坡路：ios不支持flash
Webbp,ogg,mp4三种视频格式
- Html5 2014年定稿
02 基础知识
编码格式
图像基本概念
- 图像分辨率 用于确定组成一幅图像的像素数据，就是指在水平方向和垂直方向图像所具有的像素个数
- 图像深度
图像深度指储存每个像素需要的比特数。图像深度决定了图像的每个像素可能的颜色数、灰度级数。
例如：彩色图像每个像素用R,G,B三个分量表示，每个分量用8位，像素深度为24位，可以表示的颜色数目为2 ^ 24 = 16777216个。
一幅单色图像存储每个像素需要8位,图像的像素深度为8位，最大灰度数目2 ^ 8 = 256个
视频基本概念
- 分辨率
每一帧的图像分辨率
- 帧率
视频单位时间内包含的视频帧的数量
- 码率
视频单位时间内传输的数据量，一般用kbps来表示，即千位/秒
I帧，P帧，B帧
-
I帧 编码帧，一种自带全部信息的独立帧，无需参考其他图像便可独立进行编码
-
P帧 帧间预测编码帧，需要参考前面的帧或者P帧才能进行编码
-
B帧 双向预测编码帧，B帧记录的是本帧与前后帧的差别
GOP(Group of Picture)
两个I帧之间的间隔
为什么要编码？
- 例子
分辨率：1920 * 1080
大小：1920 * 1080 * 24 / 8 = 6220800 Byte （5.9M）
帧率：30 FPS
时长：90分钟
大小：933G
几种冗余的情况
- 空间冗余
- 时间冗余
- 编码冗余
- 视觉冗余
- 编码数据处理流程
封装格式
多媒体元素和扩展API
<video>元素
<audio>元素
<audio>和<video>元素 方法
<audio>和<video>元素 属性
<audio>和<video>元素 事件
<audio>和<video>元素 缺陷
-
不支持直接播放 hls, flv 等视频格式
-
视频资源的请求和加载无法通过代码控制
分段加载（节约流量） 清晰度无缝切换 精确预加载
媒体源扩展API(Media Source Extensions)
- 无插件在web端播放流媒体
- 支持播放hls, flv, mp4 等格式视频
- 可实现视频分段加载，清晰度无缝切换，自适应码率、精确预加载等
运用
- 创建mediaSource实例
- 创建指向mediaSource的URL
- 监听sourceopen事件
- 创建souceBuffer
- 向sourceBuffer中加入数据
- 监听updateend事件
MSE播放流程
播放器播放流程
mp4 和 fmp4
流媒体协议
HLS全称是HTTP Live Streaming, 是一个由Apple公司提出的基于HTTP的媒体流传输协议，用于实时音视频流的传输。目前HLS协议被广泛地应用于视频点播和直播领域。
主播放列表
媒体放列表
03 应用场景
04 总结与展望
总结
- flash -> H5 video -> MSE
- 编码格式、封装格式、多媒体元素、流媒体协议
- 应用场景
新技术标准
- Webassembly
- WebCodecs
- WebGPU
- WebVR, WebXR
