这是我参与第四届青训营-前端基础场笔记创作活动的第4天
一、Web多媒体历史
二、基础知识
1.编码格式
图像基本概念
-
图像分辨率 : 用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。
-
图像深度 : 图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如，彩色图像每个像素用R,G,B三个分量表示,每个分量用8位，像素深度为24位，可以表示的颜色数目为2的24次方，既16777216个; 一副单色图像存储每个像素需要8bit,则图像的像素深度为8位，最大灰度数目为2的8次方，既256个。
视频基本概念
-
分辨率 : 每一帧的图像分辨率（所有帧分辨率相同）
-
帧率 : 视频单位时间内包含的视频帧的数量
-
码率 : 就是指视频单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒。
视频帧的分类
-
I帧又称帧内编码帧，是一种自带全部信息的独立帧，无需参考其他图像便可独立进行解码
-
P帧又称帧间预测编码帧，需要参考前面的I帧或者P帧才能进行编码
-
B帧又称双向预测编码帧，也就是B帧记录的是本帧与前后帧的差别
GOP(group of picture)
两个I帧之间的间隔
为什么要编码
为了压缩视频视频大小，为了更好的进行视频传输和节约存储空间。视频是有很多冗余的，包括空间冗余、时间冗余、编码冗余、视觉冗余等。
2.封装格式
存储音视频、图片或字幕信息的容器，便于存储传输
3.多媒体元素和扩展API
video和audio元素
在h5中，可以通过video标签和audio标签分别播放视频和音频。两种标签用法一样。
元素方法
-
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标签的缺陷
- 不支持直接播放hIs、flv等格式视频
- 视频资源的请求和加载无法通过代码控制
- 分段加载(节约流量)
- 清晰度无缝切换(增强用户体验)
- 精确预加载(增强用户体验)
媒体源扩展API(Media Source Extensions)
-
无插件在Web端播放流媒体
-
支持播放hIs、flv、 mp4等格式视频
-
可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等
MSE播放流程
播放器播放流程
mp4和fmp4
fmp4文件结构相比普通的MP4文件多了多个moof和moot文件，因此对流式播放支持得更加友好
4.流媒体协议
HLS全称是HTTP Live Streaming,是一个由Apple公司提出的基于HTTP的媒体流传输协议，用于实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域。在I0S段，只要把M3U8的地址直接赋给video标签的src，就可以直接播放。
三、应用场景
Web多媒体:视频编辑、点播、直播、图片、云游戏、实时通信。
四、总结和展望
总结
- flash> H5 video> MSE
- 编码格式、封装格式、多媒体元素、流媒体协议
- 应用场景
新技术标准
- Webassembly
- WebCodecs
- WebGPU
- WebVR、WebXR
