Web多媒体
这是我参与「第四届青训营 」笔记创作活动的的第17天
1.重点内容
了解一下Web多媒体的历史，现在以及未来
2.重要的知识点
- Web多媒体的发展历史
- 基础知识
- 应用场景
- 多媒体的未来
3.详尽的知识点
Web多媒体的发展历史
- Flash
- HTML5
- Media Source Extensions
基础知识
编码格式
图像基本概念
- 分辨率：用于确定组成一幅图像的像素依据，指图像所具有的像素个数
- 图像深度：图像深度指储存每个像素所需要的比特数
视频基本概念
- 分辨率：每一帧的图像分辨率
- 帧率：视频单位时间内所包含的视频帧的数量
- 码率：视频单位时间内传输的数据量，单位kbps，即千位每秒
帧的分类
- I帧：帧内编码帧
- P帧：帧间预测编码帧
- B帧：双向预测编码帧
四种冗余
- 空间冗余
- 时间冗余
- 结构冗余
- 视觉冗余
编码数据处理流程
- 预测：去除空间冗余和时间冗余
- 变换：去除空间冗余
- 量化：去除视觉冗余
- 熵编码：去除编码冗余
封装格式
封装格式是存储音视频，图片或者字幕相信的一种容器
| 视频封装格式 | 视频文件格式 |
|---|---|
| Audio Video Interleave | AVI |
| Windows Media Video | WMV |
| Moving Picture Experts Group | MPG MPEG VOB DAT 3GP MP4 |
| Matroska | MKV |
| Real Video | RM RMVB |
| QuickTime File Format | MOV |
| Flash Video | FLV |
| ... | ... |
多媒体元素与拓展API
多媒体元素
-
video
-
audio
- 不支持直接播放hls，flv等格式的视频
- 视频资源的请求和加载无法通过代码控制
-
MSE
媒体源扩展API
- 无插件在Web端播放流媒体
- 支持播放hls，flv，mp4等格式的视频
- 可以实现视频的分段加载，清晰度的无缝切换等
流媒体协议
| 协议名称 | 传输协议 | 封装格式 | HTML5 |
|---|---|---|---|
| HLS | HTTP | M3U8/TS | 支持 |
| HTTP-FLV | HTTP | FLV | 支持 |
| Dash | HTTP | FMP4 | 支持 |
| RTMP | TCP | FLV | 不支持 |
应用场景
- 点播视频
- zhib
- 图片
- 云游戏
- 实时通信
- 视频编辑
多媒体的未来
- Webassembly
- WebCodes
- WebGPU
- WebVR,WebXR
4.课后总结
我们生活在多媒体的时代，这个时代我们能从互联网上获取数以亿的信息和知识，而多媒体就是这些知识的承载体，作为开发者，应该有能力和兴趣通过多媒体，将自己的所思所想和世界上的其他开发者分享，为开源社区贡献自己的力量。
