1. Web多媒体历史
-
最开始网页上只能浏览文字和图片，我们只能使用播放插件来进行音视频的播放 如flash(1994-2020) draemweaver fireworks插件 -
2014年，HTML5定稿，出现标签<audio><video> 支持在网页上原生的播放音视频并进行一定的控制 -
由于<audio><video>控制的不足，出现了 Media Source Extensions 媒体资源扩展API
2. 基础知识
2.1 编码格式
「图像基本概念」
图像分辨率：用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。
图像深度：图像深度是指存储每个像素所需要的比特数。图像深度决定了用图像的每个像素可能的颜色数或可能的灰度级数。例如，彩色图像每个像素用R,G,B三个分量表示，每个分量用8位表示，像素深度为24位，可以表示的颜色数目为2的24次方，即16777216个；一副单色图像存储每个像素需要8bit，则图像的像素深度为8位，最大灰度数为2的8次方，既256个。
「视频基本概念」
分辨率：每一帧的图像分辨率
帧率：视频单位时间内包含的视频帧的数量
码率：就是指视频单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒。
「视频帧的分类」
分为 I帧、P帧、B帧：
-
I帧又称帧内编码帧，是一种自带全部信息的独立帧，无需参考其他图像便可独立进行解码 -
P帧又称帧间预测编码帧，需要参考前面的I帧或者P帧才能进行编码 -
B帧又称双向预测编码帧，也就是B帧记录的是本帧与前后帧的差别
如何读取帧？
-
第一幅图先读取I帧，P帧再参考I帧进行编码，之后P帧参考前一个P帧进行编码，依次类推，顺序是1，2，3，4，5，6。
-
第二幅图先读取I帧，P帧再参考I帧进行编码，在读取第4帧P帧，再读取B帧参考2、4帧的P帧，依次类推，顺序是1，2，4，3，6，5。
「GOP （group of picture）」 ：
-
两个I帧之间的间隔
❝
为什么要编码？
❞
假如该张图片是：1920X1080的分辨率，位图深度为24，那么它的大小为 1920X1080x24/8 = 6220800Byte （5.9M）。
假如有一段视频每一帧都是这张图片，帧率为30FPS，时长为90分钟，那么它的大小为30x60x90x5.9M=933G 。
那么不进行编码的话，可想而知，我们的设备存储不了几张图片，甚至视频都存不上去。
❝
进行编码需要做什么？
❞
处理空间冗余
从这张图片里边可以看出这部分区域的颜色一致，难道我们还傻乎乎的存储一遍，不，我们要做的是通过一个变量记录颜色一致的区域，只存储一次即可。
处理时间冗余
你会发现第N帧和第N+1帧的视频帧中大部分区域的图像一致，只是被击球的位置不同，那么可以把图像一致的区域进行存储，不一致的进行存储。
处理编码冗余
这张图片只有蓝色和白色，那么我们还把每个像素（假设每个像素24像素深度）进行存储吗，我们可以换种思路，把蓝色像素作为1进行存储，白色像素作为0进行存储，这样会大大节省存储空间。
处理视觉冗余
人的视觉对有些颜色是看不见的以及对高频的图像不太敏感，我们去除这些后，图片从286KB压缩为11KB，但看起来没有区别。
❝
编码数据处理流程
❞
❝
编码格式
❞
2.2 封装格式
如何对数据进行传输？
封装格式：存储音视频、图片或者字幕信息的一种容器
经常用的视频分装格式
2.3 多媒体元素和扩展API
通过多媒体元素和扩展API进行视频播放
❝
首先介绍多媒体元素：
❞
<video>标签-播放视频
<audio>标签 播放音频
「<audio>和<video>标签 方法」
「<audio>和<video>元素 属性」
「<audio>和<video>元素 事件」
❝
<audio>和<video>元素 缺陷
❞
-
不支持直接播放hls、flv等视频格式。
-
视频资源的请求和加载无法通过代码控制：
-
分段加载（节约流量） -
清晰度无缝切换 -
精确预加载
❝
接下来介绍多媒体元素和扩展API （Media Source Extensions）
❞
MSE支持：
-
无插件在web端播放流媒体 -
支持播放hls、flv、mp4等格式视频 -
可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等
使用MSE步骤
MSE播放流程
❝
播放器播放流程
❞
❝
mp4和fmp4的比较
❞
mdat 存储所有视频和音频的裸流数据
moov 封装的数据，称为元数据
多个moof、mdat对流媒体播放支持较好
2.4 流媒体协议
「HLS」 「全称是」 「HTTP Live Streaming」，是一个由 Apple 公司提出的基于 HTTP 的媒体流传输协议，用于实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域。
HLS播放流程
M3U8
3. 应用前景
4. 总结与展望
总结
-
Flash -> H5 Video -> MSE -
编码格式、封装格式、多媒体元素、流媒体协议 -
应用场景
新技术
-
Webassembly -
WebCodecs 前端对音频和视频进行编码和解码 -
WebGPU 使用底层的GPU -
WebVR、WebXR 针对元宇宙
原文始发于微信公众号（yanghi）：Web多媒体入门
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/226933.html
