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

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

Web多媒体历史

多媒体是我们可以看到和听到的一切：文本、书籍、图片、音乐、声音、CD、视频、DVD、档案、电影等等。

Fireworks 与 Dreamweaver、Flash 统称为网页三剑客。但在2017年7月25日，Adobe Systems公司宣布，计划在2020年底逐步淘汰Flash播放器插件。目前Adobe与重橙网络合作并支持其在中国大陆地区对Flash Player的独家发行与维护，该合作仅限中国大陆地区。

基础知识

图像基本概念：

图像分辨率：图像分辨率指图像中存储的信息量，是每英寸图像内有多少个像素点，分辨率的单位为PPI(Pixels Per Inch)，通常叫做像素每英寸。图像分辨率一般被用于ps中，用来改变图像的清晰度。

图像深度：图像深度是指像素深度中实际用于存储图像的灰度或色彩所需要的比特位数。假定图像的像素深度为16bit，但用于表示图像的灰度或色彩的位数只有15位，则图像的图像深度为15。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如，彩色图像每个像素用R,G,B三个分量表示,每个分量用8位，像素深度为24位。可以表示的颜色数目为2的24次方，既16777216个﹔一副单色图像存储每个像素需要8bit，则图像的像素深度为8位，最大灰度数目为2的8次方，既256个。（图片的分辨率越大不一定所占据的存储空间越大，还要根据其图片深度占用位数。）

视频基本概念

• 分辨率：每一帧图像的分辨率（所有帧分辨率相同）
• 帧率：视频单位时间内包含的视频帧的数量
• 码率：指视频单位时间内传输的数据量，一般用kbps标签，即千位每秒

视频帧的分类

编码格式：

为什么要编码：

假设存在一个图片，分辨率是1920*1080，那么这张图片在没有压缩的情况下是：1920108024/8=6220800Byte，大约5.9M。若有一个视频帧率为30FPS，时长 90分钟，则占用空间将会为大小 933G。

倘若所有文件都按照原来的大小储存，则会有空间、时间、编码、视觉冗余，会浪费很多空间，因此为了节约空间，可以将文件进行压缩。

编码的格式和出现时间表：

封装格式：

流媒体协议：

HLS全称是HTTP Live Streaming，是一个由Apple公司提出的基于HTTP的媒体流传输协议，用于实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域。在IOS段，只要把M3U8的地址直接赋给video标签的src，就可以直接播放。

应用场景：

总结：

• flash > H5 video> MSE
• 编码格式、封装格式、多媒体元素、流媒体协议
• 应用场景

新技术标准：

• Webassembly
• WebCodecs
• WebGPU
• WebVR、WebXR