这是我参与「第四届青训营」笔记创作活动的的第16天
本堂课重点内容
- Web 多媒体基础知识
详细知识点介绍
Web 多媒体历史
-
Flash
-
HTML
-
Media Source Extensions
基础知识
编码格式
主流编码格式
H.262/MPEG-2 、H.264/AVC 、H.265/HEVC 、H.266/VVC
图像基本概念
图像分辨率︰用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数
图像深度︰图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如，彩色图像每个像素用R,G,B三个分量表示,每个分量用8位，像素深度为24位，可以表示的颜色数目为2的24次方，既16777216个﹔一副单色图像存储每个像素需要8bit，则图像的像素深度为8位，最大灰度数目为2的8次方，既256个
视频基本概念
分辨率∶每一帧的图像分辨率 帧率:视频单位时间内包含的视频帧的数量 码率︰就是指视频单位时间内传输的数据量,一般我们用kbps来表示，即千位每秒
I帧：I帧或关键帧或帧内帧（I-frame or Key-Frame or Intra-frame）仅由帧内预测的宏块组成
P帧：P帧代表预测帧，除了空域预测以外，它还可以通过时域预测来进行压缩。P帧参考前面的帧进行运动估计
B帧：B帧可以参考在其前后出现的帧。B帧中的B就代表双向（Bi-Directional）
GOP（group of picture）：两个l帧之间的间隔
为什么要编码？
压缩存储空间：空间冗余、时间冗余、编码冗余、视觉冗余
编码数据处理流程
预测（去除空间冗余、时间冗余） -> 变换（去除空间冗余） -> 量化（去除视觉冗余） -> 熵编码（去除编码冗余）
封装格式
存储音视频、图片或者字幕信息的一种容器
| 视频封装格式 | 视频文件格式 |
|---|---|
| AVI(Audio Video lnterleave) | AVI |
| WMV(Windows Media Video) | WMV |
| MPEG(Moving Picture Experts Group) 分为MPEG-1，MPEG-2.MPEG-4 | MPG MPEG VOB DAT 3GP |
| MP4 | |
| Matroska | MKV |
| Real Video | RM RMVB |
| QuickTime File Format | MOV |
| Flash video | FLV |
| ... | ... |
多媒体元素和扩展 API
<audio>和<video>元素缺陷
-
不支持直接播放 hls、flv 等视频格式
-
视频资源的请求和加载无法通过代码控制
-
分段加载(节约流量)
-
清晰度无缝切换
-
精确预加载
-
媒体源扩展APl (Media Source Extensions)
-
创建 mediaSource 实例
-
创建指向 mediaSource 的URL
-
监听 sourceopen 事件
-
创建 sourceBuffer
-
向 sourceBuffer 中加入数据
-
监听 updateend 事件
播放器播放流程
数据加载 -> 解封装 -> 重封装 -> appendBuffer -> 解码渲染 -> 音视频同步
流媒体协议
| 协议名称 | 传输协议 | 封装格式 | HTML5 |
|---|---|---|---|
| HLS | HTTP | M3U8/TS | 支持 |
| HTTP-FLV | HTTP | FLV | 支持 |
| Dash | HTTP | FMP4 | 支持 |
| RTMP | TCP | FLV | 不支持 |
HLS 全称是 HTTP Live Streaming，是一个由 Apple 公司提出的基于 HTTP 的媒体流传输协议，用于实时音视频流的传输。目前 HLS 协议被广泛的应用于视频点播和直播领域。
应用场景
Web多媒体：图片、直播、点播、视频编辑、实时通信、云游戏
课后个人总结
本课程让我对 Web 多媒体的基本概念有了一个大致的认识，并对 Web 多媒体的基础知识有了初步的认识。Web 多媒体，尤其是Media Source Extensions，使前端的音频和视频处理更加灵活。或许我之前的 Web 多媒体只是一种模糊认识，但经过这一节课的学习，我已经能够比较全面地了解 Web 多媒体的基本原理和技术，并且能够利用基本的知识来解决某些问题。
引用参考
第四届字节跳动青训营「Web 多媒体入门」课程
