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

71 阅读2分钟

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

编码格式

图形基本概念

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

视频基本概念

视频基本概念.png

视频帧

I

帧内编码帧,是一种自带全部信息的独立帧,无序参考其他图像便可独立运行解码

P

帧间预测编码帧,需要参考前面的I帧或者p帧才能进行编码

B

双向预测编码帧,记录本帧与前后帧的差别

  • DPS解码时间戳
  • PDS显示时间戳

GOP(group of picture)

定义

两个I帧之间的间隔

性质

  • 第一帧一定是关键帧
  • 帧不是越多越好。I帧占内存大,越多压缩越困难,一般两秒到四秒。
  • I帧不能太少,跳转到某一页时需要从最近的I帧开始解码。

编码原因

视频本身占内存太大 编码原因.png

编码数据处理流程

封装格式

封装格式是存储音频视频、图片或者字幕信息的一种容器,有以下常见格式

多媒体元素和扩展API

常见多媒体元素有video和audio,下面介绍常见的方法、属性和事件。

方法

属性

事件

缺陷

缺陷.png

媒体扩展API

性质

  • 无插件在web端播放流媒体
  • 支持播放hls、flv、mp4等格式视频
  • 可实现视频分段、清晰度无缝切换、自适应码率、精确预加载等

过程

  1. 创建mediaSource实例
  2. 创建指向mediaSource的URL
  3. 监听Sourceopen事件
  4. 创建sourceBuffer
  5. 向sourceBuffer中加入数据
  6. 监听updateend事件