这是我参与「第四届青训营 」笔记创作活动的的第22天
Web多媒体历史
- Flash(1994-2020)
- 网页三剑客falsh/dreamweaver/fireworks
- iOS不支持flash, falsh开始走下坡路
- HTML5(2014-至今)
基础知识
1.编码格式
图像
- 图像分辨率
- 图像深度
视频:时间维度上一系列图片连续展示就是视频
- 分辨率:每一帧的图像分辨率
- 每一帧的图像分辨率都是相同的
- 帧率:视频单位时间内包含的视频帧的数量, 一般用fps表示
- 例如:一秒内渲染了多少张图像
- 常用25/30/60
- 码率:指视频单位时间内传输的数据量, 一般用kbps表示, 即千位每秒
I帧, P帧, B帧
- I帧:帧内编码帧, 是一种自带全部信息的独立帧, 无需参考其他图像便可独立进行解码
- P:帧前预测编码帧,需要参考前面的I帧/P帧才能进行解码(依赖前一帧的图片)
- B:双向预测编码帧,也就是B帧记录的是本帧于前后帧的差别(依赖前后两帧的图片)
GOP(Group of Picture) 两个I帧之间的间隔, 间隔一般是2s/4s, I帧不能过大或者过小
为什么要编码
答: 为了节省空间
- 空间冗余
- 时间冗余
- 编码冗余:降低图像深度
- 视觉冗余:人类视觉对高频没有那么敏感
编码数据处理流程
2.封装格式
存储音视频/图片/字幕信息的一种容器
3.多媒体元素和拓展API
<audio>/<video>元素的缺陷:
- 不支持直接播放hls,flv等视频格式
- 视频资源的请求和加载无法通过代码控制
- 分段加载(节约流量)
- 清晰度无缝切换
- 精确预加载
代码:
var mime = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2”’ 首 后面的这一段 codecs="...." 比较特别，以逗号相隔，分为两段： 第一段，'avc1.42E01E'，即它用于告诉浏览器关于视频编解码的一些重要信息，诸如编码方式、分辨率、帧率、码率以及对解码器解码能力的要求。 在这个例子中，'avc1' 代表视频采用 H.264 编码，随后是一个分隔点，之后是 3 个两位的十六进制的数，这 3 个十六进制数分别代表： AVCProfileIndication（42） profile_compability（E0） AVCLevelIndication（1E） 第一个用于标识 H.264 的 profile，后两个用于标识视频对于解码器的要求。 先，前面的 video/mp4 代表这是一段 mp4 格式封装的视频，同理也存在类似 video/webm、audio/mpeg、audio/mp4 这样的 mime 格式。 下面来看 codecs 的第二段 'mp4a.40.2'，这一段信息是关于音频部分的，代表视频的音频部分采用了 AAC LC 标准： 'mp4a' 代表此视频的音频部分采用 MPEG-4 压缩编码。 随后是一个分隔点，和一个十六进制数（40），这是 ObjectTypeIndication，40 对应的是 Audio ISO/IEC 14496-3 标准。（不同的值具有不同的含义，详细可以参考官方文档） 然后又是一个分隔点，和一个十进制数（2），这是 MPEG-4 Audio Object Type，维基百科中的解释是 "MPEG-4 AAC LC Audio Object Type is based on the MPEG-2 Part 7 Low Complexity profile (LC) combined with Perceptual Noise Substitution (PNS) (defined in MPEG-4 Part 3 Subpart 4)"，具体是什么意思就不翻译了，其实就是一种 H.264 视频中常用的音频编码规范。 datatracker.ietf.org/doc/html/rf…
