Web多媒体入门 | 青训营笔记
这是我参加【第四届青训营】笔记创作活动的第20天
01—Web多媒体历史
-
第一阶段：PC为主的时代
- 不能实现音视频播放，需要使用第三方插件，网页三剑客：flash、draemweaver、fireworks。
-
第二阶段：移动互联网时代
- Flash下坡路，ios不支持flash。推出了html5，但只支持webp、ogg、MP4三种视频格式。只能进行格式转换进行播放
- 后来推出Media Source Extensions
02—基础知识
02-1—编码格式
02-1-1—图像基本概念
图像分辨率：用于确定组成一副图像的像素数据，就是指水平和垂直方向上图像所具有的的像素个数。1920*1080
图像深度：图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如，彩色图像每个像素用R.G.B三个分量表示，每个分量用8位，像素深度为24位，可以表示的颜色数目为2的24次方，即16777216个；一副单色图像存储每个像素需要8bit，则图像的像素深度为8位，最大灰度数目为2的8次方，即256个。
图像分辨率越大的图像所占有的存储空间就越大吗？
不一定，还要看图像深度。e.g. 1920 * 1080，图像深度为8位、1920 * 700，图像深度24位，分辨率小的图像占的空间更大。
02-1-2—视频基本概念
分辨率：每一帧的图像分辨率；所有帧的分辨率都是相同的。
帧率：视频单位时间内包含的视频帧的数量；常用25-30
码率：就是指视频单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒。
视频由分辨率、帧率、码率都决定视频的大小。
02-1-3—视频帧的分类
I独立进行编码帧又称帧内编码帧，是一种自带全部信息的独立帧，无需参考其他图像便可独立进行编码。
P帧又称帧内预测编码帧，需要参考前面的I帧或者P帧才能进行编码。
B帧又称双向预测编码帧，也就是B帧记录的是本帧与前后帧的差别。
只有I帧和P帧时：dts123456；bts123456
有I帧、P帧、B帧时：dts124365；bts123456
每个GOP的第一帧是关键帧。I帧越多占有的存储空间越多。GOP通常间隔在2/4s
02-1-4—为什么要编码？
目的为了视频的存储和传输。
02-1-5.1—空间冗杂
02-1-5.2—时间冗杂
99%相同的数据称为时间冗杂。
02-1-5.3—编码冗杂
蓝色用1表示；白色为0.
02-1-5.4—视觉冗余
针对人类视觉系统，不是所有颜色都能看到。
将视觉看不到的颜色去除，去除之后效果一样。
02-1-5.5编码数据处理流程
预测包括帧内预测和帧间预测。
I帧属于帧内预测，去除空间冗余；帧间预测去除时间冗余。
目前用到的最主流的标准：
H.262用在数字电视、VCD/TCD光盘上；
H.264各大视频网站爱奇艺、腾讯、抖音、快手等在PC端上看；
4k以上压缩效率没有那么大，需要265来实现4k视频的编码；
H.265比264的压缩效率高一倍，手机端看视频基本走265编码；
H.266用于AR 8k的视频。
谷歌整的VP9/VP10，但VP10的压缩效率没有265好，于是与亚马逊、微软等组成AOM联盟，推出一个AV1的编码，与265的压缩效率差不多；
AVS中国推出的编码，到达AVS3与265的压缩效率差不多。
02-2—封装格式
封装格式：存储音视频、图片或者字幕信息的一种容器。
02-3—多媒体元素和扩展API
引入video标签，src指向视听地址即可。有两种方式，如上图
用source方式，video标签里可以嵌套多个source，第一个成立不会去下一个，第一个不行去下一个，兜底作用。
play方法为异步。
<audio> 和 <video> 元素 缺陷
不支持直接播放hls、flv等视频格式；
视频资源的请求和加载无法通过代码控制；
- 分段加载(节约流量)；
- 清晰度无缝切换；
- 精确预加载；
媒体源扩展API(Media Source Extensions)
- 无插件在web端播放流媒体；
- 支持播放hls、flv、MP4等格式视频；
- 可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等
播放器播放流程
02-4—流媒体协议
HLS全称是HTTP live Streaming，是一个由Apple公司提出的基于HTTP的媒体流传输协议，用于实时音视频流的传输。目前HLS协议被广泛应用于视频点播和直播领域。
03—应用场景
点播的主要流程：视频上传到服务器，进行转码成码流，分发cpn进行拉流；直播与点播差不多但是实时性比较高；云游戏相当于一个端，程序运行在远端的pot上，生成视频流再传回来，根据命令执行不同的操作再传回前端；实时通信：e.g.视频会议；视频编辑：视频裁剪拼接，也可以在web端进行操作。
