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

Web 多媒体历史

浏览器和 Web 的概念刚刚出现的时候，没有任何多媒体。很快，图像开始加入，但是充其量是穷人的多媒体。虽然随着 GIF 动画的出现，这些图像可以成为动画，但是这些动画完全是非交互性的。即使在音频和视频文件出现时，互联网技术在 Web 上传递这些文件的能力也很有限。互联网连接很慢，而音频和视频文件很大，没有人希望等待大文件的下载。文件下载之后，也必须使用独立于 Web 浏览器的外部播放器来查看内容。

互联网连接速度的飞速提高带来了更快地在 Web 上发送多媒体的能力，Web 浏览器技术也同样快速进步，自然地推出了现在称之为原生多媒体的技术。

基本上 Web 多媒体可以分为两个大的阶段，第一个阶段是以 PC 为主的时代，这个时代浏览器基本上是不支持音频和视频的，但浏览图片和文字是没有问题的。那个时候浏览器是不能实现音视频播放的，音视频播放基本上基于第三方插件，最主要的代表就是 Flash 播放器。后来到了移动互联网时代，慢慢的 Flash 就被淘汰了，其中有一个标志性的事件，就是 iPhone 手机出现之后，宣告不支持 Flash，从这儿开始，Flash 就开始走下坡路。那既然移动端它不支持 flash，那怎么播音视频呢？慢慢地，推出了一个新的标准 HTML5，新的标准原生支持音视频播放。但是后来大家发现原生标签它的功能实在是太有限了。而且还有其他的问题比如 video 标签复制这个视频的地址之后，所有的事情都是浏览器接管了，比如数据的请求、请求状态，包括这些错误状态，我们都拿不到的，那这个时候怎么办好？W3C 组织也意识到了这个问题，所以就推出了 Media Source Extensions，相当于一个媒体资源拓展 API，基于这个 API 我们就可以实现多视频格式的播放。

Flash HTML5

基础知识

编码格式

H.262/MPEG-2 主要应用于：数字电视；DVD、VCD光盘等。

H.264/AVC 各大视频网站 PC 端观看时基本都是 H.264 编码。

H.265/HEVC 手机端 4K 视频。

H.266/VVC VR视频、穿戴设备、8K视频。

图像基本概念

图像分辨率：

用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。

图像深度：

图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如，彩色图像每个像素用 R,G,B 三个分量表示，每个分量用 8 位，像素深度为 24 位，可以表示的颜色数目为 2 的 24 次方，既 16777216 个；一副单色图像存储每个像素需要 8bit，则图像的像素深度为 8位，最大灰度数目为 2 的 8 次方，既 256 个。