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

一、重点内容：

• Web多媒体的历史、基础知识及应用场景

• Web多媒体的未来

二、详细知识点介绍：

Web多媒体历史

凭借flash插件播放音视频

HTML5 原生支持音视频

Media Source Extension 扩展API

基础知识

编码格式

图形基本概念

图像分辨率:用于确定组成一副图像的像素数据， 就是指在水平和垂直方向上图像所具有的像素个数

图像深度:图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数

视频基本概念

分辨率:每一帧的图像分辨率

帧率:视频单位时间内包含的视频帧的数量

码率:就是指视频单位时间内传输的数据量,一般我们用kbps来表示，即千位每秒。

I帧又称帧内编码帧，是一种自带全部信息的独立帧，无需参考其他图像便可独立进行解码

P帧又称帧间预测编码帧，需要参考前面的I帧或者P帧才能进行编码

B帧又称双向预测编码帧，也就是B帧记录的是本帧与前后帧的差别

GOP(group of picture)

两个I帧之间的间隔，通常间隔2-4秒

为什么要编码

• 空间冗余

• 时间冗余

• 编码冗余

• 视觉冗余

编码数据处理流程

封装格式

封装格式：存储音视频、图片或者字幕信息的一种容器

多媒体元素和扩展API

MSE

方法

属性

事件

缺陷

不支持直接播放hls、flv等视频格式

视频资源的请求和加载无法通过代码控制

• 分段加载

• 清晰度无缝切换

• 精确预加载

播放器播放流程

流媒体协议

HLS全称是HTTP Live Streaming，是一个由Apple公司提出的基于HTTP的媒体流传输协议，用于实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域。

应用场景

• 点播

• 直播

• 图片

• 云游戏

• 实时通信

• 视频剪辑

三、课后个人总结：

今天学习了Web多媒体的基本知识，接触到了以前从未接触的知识，拓宽了视野，开阔了眼界，也启发我不断学习前端的新知识。