这是我参与「第四届青训营 」笔记创作活动的第8天
一、Web多媒体历史
-
多媒体：多媒体是我们可以看到和听到的一切：文本、书籍、图片、音乐、声音、CD、视频、DVD、档案、电影等等。
-
多媒体以多种方式存在。在因特网上会有很多被嵌入网页中的元素，并且今天的 web 浏览器已支持多种多媒体格式。
-
第一代浏览器只支持文本，而且即使是对文本的支持也仅限于单一字体和单一颜色，随后诞生了支持颜色、字体和文本样式的浏览器，还增加了对图片的支持。不同的浏览器以不同的方式处理对音效、动画和视频的支持，某些元素能够以内联的方式处理，而某些则需要额外的插件。
二、基础知识
2.1 编码格式
图像基本概念
图像分辨率:用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。
图像深度:图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如，彩色图像每个像素用R,G,B三个分量表示，每个分量用8位，像素深度为24位，可以表示的颜色数目为2的24次方，既16777216个; 一副单色图像存储每个像素需要8bit,则图像的像素深度为8位，最大灰度数目为2的8次方，既256个。
视频基本概念
分辨率:每一帧的图像分辨率
帧率:视频单位时间内包含的视频帧的数量
码率:就是指视频单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒。
视频帧分类：
- I帧：帧内编码帧，视频品德压缩不依赖其他帧
- P帧：前向预测编码帧，解码依赖于前一帧的图片
- B帧：双向预测编码帧，解码依赖于前后两帧的图片
GOP
一组图片，通常称两个I帧之间的间隔一个为GOP
编码数据处理流程
预测：分为帧内预测和帧间预测，帧内预测主要针对I帧，去除空间冗余；帧间预测主要去除时间冗余。
2.2 封装格式
封装格式：储存音视频、图片或者字幕信息的一种容器
常见视频封装格式：
2.3 多媒体元素和扩展API
HTML元素
-
<video>标签用于播放视频或直播流，可以通过JS HTMLVideoElement对象访问，结合媒体API和其他DOM技术可实现更丰富的媒体应用 -
<audio>标签用于播放音频，可以通过JS HTMLAudioElement对象访问
<video> 和 <audio>元素方法：
<video> 和 <audio>元素属性：
<video> 和 <audio>元素事件：
<video> 和 <audio>元素缺陷：
-
不支持直接播放hls、flv等视频格式
-
视频资源的请求和加载无法通过代码控制：
- 分段加载（节约流量）
- 清晰度无缝切换
- 精确预加载
媒体源扩展API
- 无插件在Web端播放流媒体
- 支持播放hls、flv、mp4等格式视频
- 可实现视频分段加载，清晰度无缝切换，自适应码率，精准预加载等
MSE (Media Source Extension)：扩展了浏览器的媒体播放功能，允许用JS动态构造媒体流MediaSource对象，然后喂给<video>和<audio>标签进行更精细化的播放控制。
使用流程
- 创建Media Source实例
- 创建指向Media Source的URL
- 监听source open事件
- 创建Source Buffer
- 向Source Buffer中加入数据
- 监听updateend事件
MSE播放流程
播放器播放流程
2.4 流媒体协议
常用流媒体协议：
HLS
HLS全称是HTTP Live Streaming,是一个由Apple公司提出的基于HTTP的媒体流传输协议，用于实时音视频流的传输。目前HLs协议被广泛的应用于视频点播和直播领域。
播放流程：
HLS中M3U8常见类型：
- 主播放列表：
- 媒体播放列表：
三、应用场景
四、个人总结
今天恕我在青训营学习的第16天，今天学习了Web多媒体的基础知识，包括Web多媒体的发展历史从flash-->H5 video-->MSE、编码格式、封装格式、多媒体元素、流媒体协议以及Web多媒体的应用场景，快速帮助我入门Web多媒体的应用，同时我结合自己搜索到的资料对Web多媒体有了一个初步的了解。
