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

笔记小结： 本节课刘立国老师从Web多媒体历史开始讲起，介绍了相关了基础知识，以及各场景下的实际应用案例。课程的最后，刘老师对本节课的内容进行总结与展望。总的来说课程难度中等，理解起来不难，现对照课程内容顺序将笔记补充如下。
拓展链接： 【前端专场学习资料七】第四届字节跳动青训营 - 掘金 (juejin.cn)

01. Web多媒体历史

多媒体（Multimedia）指图片、声音、音乐、动画和视频。
现代的 web 浏览器支持多种多媒体格式。

什么是多媒体？

多媒体是我们可以看到和听到的一切：文本、书籍、图片、音乐、声音、CD、视频、DVD、档案、电影等等。
多媒体以多种方式存在。在因特网上，您会发现很多被嵌入网页中的元素，并且今天的 web 浏览器已支持多种多媒体格式。

浏览器支持

第一批因特网浏览器仅支持文本，甚至被限制为单一颜色的单一字体。
随后的 web 浏览器支持色彩、字体以及文本样式，并增加了对图像的支持。
不同的浏览器对声音、动画以及视频的处理方式是各不相同的。某些元素被内联处理，某些要求插件，而某些则要求 ActiveX 控件。

多媒体格式

多媒体元素（比如声音或视频）被存储在媒体文件中。
识别媒介类型的最通用的方法是查看文件的扩展名。
当浏览器获知文件的后缀是 .htm 或者 .html，它将假定文件是 HTML 页面。.xml 后缀表示 XML 文件，而 .CSS 后缀表示样式表。
图像格式是通过 .gif 或 .jpeg 后缀来识别的。
多媒体元素同样拥有带有不同后缀的文件格式。

02. 基础知识

编码格式

图像基本概念

图像分辨率： 用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。如1920*1080（水平方向1920个像素、垂直方向1080个像素）

图像深度︰ 图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如, 彩色图像每个像素用R,G,B三个分量表示,每个分量用8位,像素深度为24位可以表示的颜色数目为2的24次方，既16777216个﹔一副单色图像存储每个像素需要8bit，则图像的像素深度为8位，最大灰度数目为2的8次方，既256个。（图片的分辨率越大不一定所占据的存储空间越大，还要根据其图片深度占用位数。）

视频的基本概念

分辨率： 每一帧图像的分辨率（所有帧分辨率相同）
帧率： 视频单位时间内包含的视频帧的数量
码率： 指视频单位时间内传输的数据量，一般用kbps标签，即千位每秒

视频帧的分类

I帧
- I帧对视频压缩编码无需依赖其他的帧，只要有I帧自己的数据就能完全解码。
P帧（前项预测编码帧）
- 其解码要依赖前一帧，前一帧没解码自身也无法解码。
B帧
- 其解码不仅要依赖前一帧，还要根据其后面的帧内容。

为什么要编码

假设存在一个图片，分辨率是1920*1080，则其未压缩的占用空间为：1920108024/8=6220800Byte，大约5.9M；

若帧率为30FPS，时长 90分钟，则占用空间为大小 933G， 这样的存储空间是不能接受的。因此编码的意义是为了压缩视频视频大小，为了更好的进行视频传输和节约存储空间。

视频是有很多冗余的，包括空间冗余、时间冗余、编码冗余、视觉冗余等。

编码数据处理流程

编码格式

封装格式

存储音视频、图片或字幕信息的容器，便于存储传输。

多媒体元素和扩展API

video和audio元素

在h5中，通过可以通过video标签和audio标签分别播放视频和音频。两种标签用法一样。

<video src="./video.mp4" muted autoplay width=600 height=300 control>
</video>

<video muted autoplay width=600 height=300 control>
    <source src="./video.mp4">
    </source>
    <source src="./video1.mp4">
    </source>   
</video>
<!-- 可以写多个source标签 -->

媒体源扩展API (Media Source Extensions)

无插件在web端播放流媒体
支持播放hls、flv、mp4等格式视频
可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等

元素方法

play：开始播放音频/视频
pause：暂停当前播放的音频/视频
load：重新加载音频/视频元素
canPlayType：检测浏览器是否能播放指定的音频/视频类型
addTextTrack：向音频/视频添加新的文本轨道

play方法是异步的，立刻暂停，即立刻调用pause方法会报错

元素属性

autoplay：设置或返回是否在加载完成后随即播放
control：设置或返回是否显示控件
currentTime：设置或返回视频/视频中的当前播放位置(以秒计)
duration：返回当前视频/音频的长度
src：设置或返回视频/音频的来源
volume：设置或返回视频/音频的音量TimeRanges对象
buffered：返回表示视频/音频已缓存部分的
playbackRate：设置或返回视频/音频的播放速度
error：返回表示错误状态的MediaError对象
readyState：返回当前的就绪状态

元素事件

loadedmetadata：浏览器开始加载视频/音频时触发
canplay：浏览器可以开始播放视频/音频时触发
play：视频/音频暂停时触发
playing：在视频/音频在因缓冲而暂停或停止后已就绪时触发
pause：视频/音频暂停时触发
timeupdate：用于播放位置改变时触发
seeking：用于开始跳跃到视频/音频中的新位置时触发
seeked：用于已跳跃到视频/音频中的新位置时触发
waiting：视频由于缓冲下一帧而停止时触发
ended：播放列表已结束时触发

video和audio标签的缺陷

不支持直接播放hls、flv等格式视频
视频资源的请求和加载无法通过代码控制
- 分段加载（节约流量）
- 清晰度无缝切换（增强用户体验）
- 精确预加载（增强用户体验）

媒体源扩展MSE(Media Source Extensions)

无插件在Web端播放流媒体
支持播放hls、flv、mp4等格式视频
可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等

MSE播放流程

播放器播放流程

mp4和fmp4
fmp4文件结构相比普通的MP4文件多了多个moof和moot文件，因此对流式播放支持得更加友好

流媒体协议

HLS全称是HTTP Live Streaming，是一个由Apple公司提出的基于HTTP的媒体流传输协议，用于实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域。在IOS段，只要把M3U8的地址直接赋给video标签的src，就可以直接播放。

03. 应用场景

Web多媒体： 视频编辑、点播、直播、图片、云游戏、实时通信。

Web 多媒体入门学习(1) | 青训营笔记