这是我参与「第四届青训营 」笔记创作活动的的第16天。
第16天的课程内容主要包括Web多媒体相关的基础知识和应用场景。
以下是本节课主要内容的总结：
Web多媒体基础知识
图像的基本概念
- 图像分辨率：
用于确定组成一幅图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。 - 图像深度：
图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。
e.g. 彩色图像每个像素用RGB三个分量表示，每个分量用8位，像素深度为24位，可以表示的颜色
数目为2的24次方；一幅单色图像存储每个像素需要8 bit，则图像的深度为8位，最大灰度数目为
2的8次方。
因此不是图像分辨率越大的图片所占空间越大。
视频基本概念
- 分辨率：
每一帧图像分辨率。 - 帧率：
视频单位时间内包含的视频帧的数量。 - 码率：
指视频单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒。
视频的大小不仅仅取决于分辨率，还取决于码率。
视频帧的分类
- I帧：帧内编码帧，进行压缩编码时不依赖于其他任何帧。
- P帧：前向预测编码帧，它的解码依赖于前面一帧的图片。
- B帧：双向预测编码帧，它的解码不但依赖于它前面的参考帧，还依赖于它后面的参考帧。
- GOP(group of picture)：两个I帧之间的间隔。
为什么要编码
为了把视频里面冗余的数据进行剔除和压缩。
- 空间冗余
- 时间冗余
- 编码冗余
- 视觉冗余
编码数据处理流程
- 预测：去除空间和时间冗余
- 变换：去除空间冗余
- 量化：去除视觉冗余
- 熵编码：去除编码冗余
封装格式
存储音视频、图片或者字幕信息的一种容器。
视频编码只存储音频数据和视频数据，其他信息需要存储在封装格式中。
常用的包括：AVI, WMV, MP4等。
多媒体元素和扩展API
- 常用的
<audio>和<video>元素方法：
play( ) 开始播放音频/视频
pause( ) 暂停当前播放的音频/视频
load( ) 重新加载音频/视频元素
canPlayType( ) 检测浏览器是否能播放指定的音频/视频类型
addTextTrack( ) 向音频/视频添加新的文本轨道 - 常用的
<audio>和<video>元素属性：
autoplay
controls
currentTime等 <audio>和<video>元素缺陷
不支持直接播放hls、flv等视频格式
视频资源的请求和加载无法通过代码控制- 媒体原扩展API（Media Source Extensions）
- 创建mediaSource实例
- 创建指向mediaSource的URL
- 监听sourceopen事件
- 创建sourceBuffer
- 向sourceBuffer中加入数据
- 监听updateend事件
应用场景
- 点播
- 直播
- 图片
- 云游戏
- 视频编辑
- 实时通信
