Web多媒体入门|青训营笔记
这是我参与「第四届青训营 」笔记创作活动的第17天
前言
随着前端的不断发展，Web网页的用户体验与需求有了极大的提升，相比以前简单的文字，现在Web能展示视频、图片、音频等多媒体。为了让用户有更好的Web体验，学习Web多媒体是必要的。
编码格式
图像的基本概念
- 图像分辨率：用于确定组成一幅图像的像素数据（指水平和垂直方向上图像所具有的像素个数）
- 图像深度：图像深度是指存储每个像素所需要的比特数
视频基本概念
- 分辨率：每一帧的图像分辨率
- 帧率：视频单位时间内包含的视频帧的数量
- 码率：就是指视频单位时间内传输的数据量，一般用kbps来表示
I帧、P帧、B帧
- I帧又称内编码帧，是一种自带全部信息的独立帧，无需参考其他图像便可独立进行解码
- P帧又称帧间预测编码帧，需要参考前面的I帧和P帧才能进行编码
- B帧又称双向预测编码帧，也就是B帧记录的是本帧与前后帧的差别
GOP（group of picture）
两个I帧之间的间隔
编码数据处理流程
封装格式
- 封装格式：存储音视频、图片或者字幕信息的一种容器
多媒体元素和拓展API
- video
- audio
- MSE
audio和video元素 方法
audio和video元素 属性
audio和video元素 方法
audio和video元素 缺陷
- 不支持直接播放hls、flv等视频格式
- 视频资源的请求和加载无法通过代码控制
媒体源拓展API（MSE）
- 无插件在web端播放流媒体
- 支持播放hls、flv、mp4等格式视频
- 可实现视频分段加载、清晰度无缝切换、自适应码率、精准预加载等
创建MSE
- 创建mediaSource实例
- 创建指向mediaSource的URL
- 监听sourceopen事件
- 创建sourceBuffer
- 向sourceBuffer中加入数据
- 监听updateend
播放流程
流媒体协议
HLS 是一个由Apple公司提出基于HTTP的媒体流传输协议，用于实时音视频的传输。
