Web多媒体入门|青训营笔记

来到人间看海
59 阅读1分钟

这是我参与「第四届青训营 」笔记创作活动的第25天

前端基础班第16节：Web多媒体入门。

一.web多媒体历史

image.png

二.基础知识

1.编码格式

（1）图像基本概念

image.png

（2）视频基本概念

image.png
  • I帧：帧内编码帧 （依赖于自己）
  • P帧：前项预测编码帧（依赖于前面的I帧）
  • B帧：双向预测编码帧（依赖于前面和后面的P帧） image.png

GOP 每个GOP的第一帧肯定是关键帧 image.png

2.为什么要编码

image.png

（1）空间冗余

image.png

（2）时间冗余

image.png

（3）编码冗余

image.png

（4）视觉冗余

image.png

3.编码数据处理流程

image.png

编码格式：

image.png

4.封装格式

image.png image.png

5.多媒体和扩展API

<video>元素

image.png

<audio>元素

image.png image.png

<video>和<audio>元素的缺陷

image.png

媒体源扩展API（MSE）

image.png

MSE使用：

image.png

MSE播放流程：

image.png

播放器播放流程：

image.png

mp4和fmp4

image.png

流媒体协议

image.png
  • HLS
image.png image.png

三.应用场景

image.png

四.总结与展望

image.png
avatar
文章
阅读
粉丝