【第二届青训营-寒假前端场】-Web 多媒体入门1

243 阅读2分钟

【第二届青训营-寒假前端场】-Web 多媒体入门

目录

  • Web多媒体的历史
  • 基础知识
  • 应用场景
  • 总结和展望

01.Web多媒体的历史

  • PC互联网第三方插件比如Flash image.png
  • HTML5

image.png 浏览器自带的audio和video标签,但视频、音频格式受限

  • Media Source Extensions W3C组织提供的标准API,媒体扩展API

02.基础知识

  1. 编码格式
  2. 封装格式
  3. 多媒体元素和扩展API
  4. 流媒体协议

1.编码格式

图像基本概念

图像分辨率:用于确定组成一副图像的像素数据,就是指在水平和垂直方向上图像所具有的像素个数。

图像深度:图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数, 或可能的灰度级数。例如, 彩色图像每个像素用R,G,B三个分量表示,每个分量用8位, 像素深度为24位, 可以表示的颜色数目为2的24次方,既16777216个;一副单色图像存储每个像素需要8bit,则图像的像素深度为8位, 最大灰度数目为2的8次方,既256个。

视频基本概念

时间维度上一系列图片连续展示就是视频

分辨率:每一帧的图像分辨率

帧率:视频单位时间内包含的视频帧的数量

码率:就是指视频单位时间内传输的数量,一般我们用kbps来表示,即千位每秒。

image.png

  • I帧又称帧内编码帧,是一种自带全部信息的独立帧,无需参考其他图像便可独立进行解码
  • P帧又称帧间预测编码帧,需要参考前面的I帧或者P帧才能进行编码
  • B帧又称双向预测编码帧,也就是B帧记录的是本帧与前后帧的差别

GOP(Group of picture)

两个帧之间的间隔 image.png

为什么要编码?

空间冗余

image.png

时间冗余

image.png

编码冗余

image.png

视觉冗余

image.png

编码数据处理流程

image.png

image.png

  • 联合视频专家组 jvt
  • 运动图像专家组 mpegAom
  • 开放媒体联盟 亚马逊、微软、google,思科,英特尔

2.封装格式

封装格式:存储音视频、图片或者字幕信息的一种容器

image.png

image.png