这是我参与「第四届青训营 」笔记创作活动的的第15天
01 Web多媒体历史
- Flash
- HTML5原生支持
- Media Source Extensions
02 基础知识
1 编码格式
图像基本概念
图像分辨率: 用于确定组成一幅图像的像素数据, 就是指在水平和垂直方向上图像所具有的像素个数
图像深度: 指存储每个像素所需要的比特数, 图像深度决定了图像的每个像素可能的颜色数, 或可能的灰度级数
视频基本概念
分辨率: 每一帧的图像分辨率
帧率: 视频单位视觉内包含的视频帧的数量
码率: 就是指视频单位视觉内传输的数据量, 一般我们用kbps来表示, 即千位每秒
编码基本概念
视频帧的分类
- I帧 (不依赖别帧)
- P帧 (解码依赖前帧)
- B帧 (解码依赖前帧和后帧)
GOP (group of picture)
两个I帧之间的间隔
GOP间解码互不依赖
为什么要编码?
图片: 1920 x 1080 x 24 / 8 = 6220800Byte (5.9M)
视频: 30FPS 90分钟 933G
为了压缩
编码数据处理流程
-
预测
去除空间冗余, 时间冗余
-
变换
去除空间冗余
-
量化
去除视觉冗余
-
熵编码
去除编码冗余
2 封装格式
存储音视频, 图片或者字母信息的一种容器
如: AVI WMV MP4 ...
3 多媒体元素和扩展API
video 和 audio
写法一
<video src="./video.mp4" muted autoplay controls width=600 height=300></video>
<audio src="./audio.mp3" muted autoplay controls width=600 height=300></audio>
写法二
<video muted autoplay controls width=600 height=300>
<source src="./video.mp4"></video>
</video>
<audio muted autoplay controls width=600 height=300>
<source src="./audio.mp3"></video>
</audio>
常用方法
| 方法 | 描述 |
|---|---|
| play() | 开始播放音频/视频 (是异步的) |
| pause() | 暂停当前播放的视频/音频 |
| load() | 重新加载音频/视频元素 |
| canPlayType() | 检测浏览器是否能播放指定的音频/视频类型 |
| addTextTrack() | 向音频/视频添加新的文本轨道 |
属性
| 属性 | 描述 |
|---|---|
| autoplay | 设置或返回是否在加载完成后随即播放音频/视频 |
| controls | 设置或返回音频/视频是否显示控件 |
| currentTime | 设置或返回音频/视频中的当前播放位置 (以秒计) |
| duration | 返回当前音频/视频的长度 (以秒计) |
| src | 设置或返回音频/视频元素的当前来源 |
| volume | 设置或返回音频/视频的音量 |
| buffered | 返回表示音频/视频已缓存部分的TimeRanges对象 |
| playbackRate | 设置或返回音频/视频播放的速度 |
| error | 返回表示音频/视频错误状态的MediaError对象 |
| readyState | 返回音频/视频当前的就绪状态 |
| ... | ... |
事件
| 事件 | 描述 |
|---|---|
| loadedmetadata | 当浏览器已加载音频/视频的元数据时触发 |
| canplay | 当浏览器可以开始播放音频/视频时触发 |
| play | 当音频/视频已开始或不再暂停时触发 |
| playing | 当音频/视频在因缓冲而暂停或停止后已就绪时触发 |
| pause | 当音频/视频已暂停时触发 |
| timeupdate | 当目前的播放位置已更改时触发 |
| seeking | 当用户开始移动/跳跃音频/视频中的新位置时触发 |
| waiting | 当视频由于需要缓冲下一帧而停止时触发 |
| ended | 当目前的播放列表已结束时触发 |
| ... | ... |
缺陷
-
不支持播放hls, flv等视频格式
-
视频资源的请求和加载无法通过代码控制
- 分段加载 (节约流量)
- 清晰度无缝切换
- 精确预加载
媒体源扩展API (Media Source Extensions)
- 无插件在web端播放流媒体
- 支持播放hls, flv, mp4等格式视频
- 可实现视频分段加载, 清晰度无缝切换, 自适应码率, 精确预加载等
4 流媒体协议
| 协议名称 | 传输协议 | 封装格式 | HTML5 |
|---|---|---|---|
| HLS | HTTP | M3U8/TS | 支持 |
| HTTP-FLV | HTTP | FLV | 支持 |
| Dash | HTTP | FMP4 | 支持 |
| RTMP | TCP | FLV | 不支持 |
HLS 全称是HTTP Live Streaming, 是一个由Apple公司提出的基于HTTP的媒体流传输协议, 用于实时音视频流的传输. 广泛用于视频点播和直播
03 应用场景
点播, 直播, 图片, 云游戏, 实时通信, 视频编辑
04 总结与展望
- flash -> H5 -> MSE
- 编码格式, 封装格式, 多媒体元素, 流媒体协议
- 应用场景
新技术标准
- WebAssembly
- WebCodecs
- WebGPU (可以看作第二代WebGL)
- WebVR, WebXR
