什么是视频
- 格式与内容
- 文件扩展名(媒体封装格式)
- 媒体封装格式不等于音视频编码格式
- 文件内容:
- 头信息(格式、时长、帧率、码率、分辨率)
- 索引信息
- 视频数据
- 视频大多采用YUV颜色空间做抽样存储
- 帧内预测和帧间预测复用可以进一步有效的压缩数据
- P帧(前向预测帧)、B项(双向预测帧)、I帧(参考帧)
- 通过上述技术综合,生成视频编码器
- 音频数据
- 对连续的声波进行采样,做数字化存储
- 还原数字信号为模拟音频信号
- 音频压缩:预测、变换
- 附加增强数据
- 传输协议
- 流媒体(直播)
- HLS:“流媒体”协议
- HTTP(S)-FLV:基于HTTP
- RTMP、RTP/RTSP等
- 点播
- HTTP(通过Range方式或者参数方式完成Seek)
- Web端(HTTPS、WS、P2P)
- 流媒体(直播)
- 播放器原理
- 解协议(加载数据)
- 解封装(解复用)
- 解码
- 渲染
Web端API
- 判断浏览器视频兼容情况
- 使用videoEl.canPlayType判断
- 基于Video时间轴控制实现交互式视频
- 基于FileReader API播放本地文件
- 基于getUserMedia调用摄像头
- 基于MediaRecorder实现录像
- 基于MediaSource播放JS拉取的媒体数据
- 创建动态媒体源,关联到video元素上
- Web端点播直播&播放器解决方案
- 点播:创作者=>上传=>转码=>存储<=>CDN分发<=>观众
- 直播:创作者=>推流<=>存储=>转码<=>CDN分发<=>观众
- 媒体类型:HTTPS-MP4(点播),HTTP(S)-FLV(点播、直播)、HTTP(s)-HLS(点播、直播(高延迟))
- 原生浏览器支持的(直接原生video播放)
- 原生浏览器不支持的
- JS解协议下载数据、解容器、重新封装,通过MSE喂给Video解码、渲染播放
- 解码器不支持
- JS下载数据,WASM解容器、解码,通过WebGL&WebAudio渲染播放
- 需要解密
- 解容器之后对每帧数据进行解密