这是我参与「第四届青训营 」笔记创作活动的第16天
一、基础知识
编码格式
图像基本概念
图像分辨率：用于确定组成一幅图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。
图像深度：图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如，彩色图像每个像素用R，G，B三个分量表示，每个分量用8位，像素深度为24位，可以表示的颜色数目为2的24次方，即16777216个；一副单色图像存储每个像素需要8bit，则图像的像素深度为8位，最大灰度数目为2的8次方，即256个。
视频基本概念
分辨率：每一帧的图像分辨率
帧率：视频单位时间内包含的视频帧的数量
码率：就是指视频单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒。
封装格式
封装格式：存储音视频、图片或字幕信息的一种容器
多媒体元素和扩展API
<audio>和<video>元素缺陷
- 不支持直接播放hls、flv等视频格式
- 视频资源的请求和加载无法通过代码控制
- 分段加载（节约流量）
- 清晰度无缝切换
- 精确预加载
媒体源扩展API（Media Source Extension）
- 无插件在web端播放流媒体
- 支持播放hls、flv、mp4等格式视频
- 可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等
- 创建mediaSource实例
- 创建指向mediaSource的URL
- 监听sourceopen事件
- 创建sourceBuffer
- 向sourceBuffer中加入数据
- 监听updateend事件
播放器播放流程
graph LR
数据加载 --> 解封装 --> 重封装 --> appendBuffer --> 解码渲染 --> 音视频同步
流媒体协议
| 协议名称 | 传输协议 | 封装格式 | HTML5 |
|---|---|---|---|
| HLS | HTTP | M3U8/TS | 支持 |
| HTTP-FLV | HTTP | FLV | 支持 |
| Dash | HTTP | FMP4 | 支持 |
| RTMP | TCP | FLV | 不支持 |
HLS全称是HTTP Live Streaming，是一个由Apple公司提出的基于HTTP的媒体流传输协议，用于实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域。
二、总结与展望
总结
- flash、H5 video、MSE
- 编码格式、封装格式、多媒体元素、流媒体协议
- 应用场景
新技术标准
- Webassembly
- WebCodecs
- WebGPU
- WebVR、WebXR
三、课后小结
本节课程学习了什么是多媒体，对一些比较重要的概念（编码格式、封装格式、Media Source Extensions（MSE）等等）和前端常用的多媒体web API有了一个初步的了解和认识。
