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

55 阅读2分钟

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

基础知识

编码格式

图像

  1. 图像分辨率:用于确定组成一副图像的像素数据,就是指在水平和垂直方向上图像所具有的像素个数
  2. 图像深度:图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数,或可能的灰度级数

视频

  1. 分辨率:每一帧的图像分辨率
  2. 帧率:视频单位时间内包含的视频帧的数量
  3. 码率:就是指视频单位时间内传输的数据量,一般我们用kbps来表示,即千位每秒
  • I帧、P帧、B帧: image.png image.png

  • GOP(group of picture):两个I帧之间的间隔 image.png

编码数据处理流程

image.png

封装格式

存储音视频、图片或者字幕信息的一种容器

多媒体元素和扩展API

  1. video元素 image.png audio和video元素的方法image.png audio和video元素的属性image.png audio和video元素的事件image.png audio和video元素的缺陷
  • 不支持直接播放hls、flv等视频格式
  • 视频资源的请求和加载无法通过代码控制
  1. 媒体源扩展API(MSE)
  • 无插件在web端播放流媒体
  • 支持播放hls、法律、MP4等格式视频
  • 可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等

MSE使用过程:

image.png

播放器播放流程:

image.png

  1. 流媒体协议

image.png

  • HLS全称HTTP Live Streaming,是一个由Apple公司提出的基于HTTP的媒体流传输协议,用于实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域。