这是我参与「第四届青训营 -前端场」笔记创作活动的的第4篇笔记

Web多媒体

编码格式

• 图像基本概念

• 图像分辨率：图像在水平/垂直方向上的具有的像素个数

• 图像深度：指存储每个像素所需要的比特数

  注：图像深度决定了图像每个像素的颜色数和灰度级数

• 视频基本概念分辨率

• 帧率（f/s or 帧每秒）：每秒的帧数(fps)

• 帧率 (Frame rate)=帧数 (Frames)/时间 (Time)

• 码率（kbps or 千位每秒）：指视频单位时间内传输的数据量

• 内编码帧（I帧/关键帧）：是一种自带全部信息的独立帧，无需参考其他图像便可独立进行解码，可以简单理解为一张静态画面

• 视频序列中的第一个帧始终都是I帧

• 帧间预测编码帧（P帧）：表示的是当前帧画面与前一帧（前一帧可能是I帧也可能是P帧）的差别

• 双向预测编码帧（B帧）：记录的是本帧与前后帧的差别

• GOP（Group of Pictures）：是一组连续的画面，由一张 I 帧和数张 B / P 帧组成，是视频图像编码器和解码器存取的基本单位，它的排列顺序将会一直重复到影像结束

• 编码数据处理流程

  • 预测 变换 量化 熵编码
  • 预测 去除空间、时间冗余
  • 变换 去除空间冗余
  • 量化 - 去除视觉冗余
  • 熵编码 - 去除编码冗余：编码过程中按熵原理不丢失任何信息的编码

• 封装格式（容器）：将已经编码压缩好的视频轨和音频轨按照一定的格式放到一个文件中

  • 视频 音频 字幕 封装格式

• 多媒体元素和扩展API

  • <video id='video' controls = “controls”>
    

  • <audio src="xxx.mp3" controls="controls" preload="auto" loop="loop">
    

  • 和元素

    • 方法

      play()

      开始播放

      pause()

      暂停

      load()

      重新加载

      canPlayType()

      检查浏览器是否能播放指定的音频/视频类型

      addTextTrack()

      向音频/视频添加新的文本轨道例子

    • 属性

      属性

      描述

      autoplay

      用于指定媒体是否在页面加载后自动播放

      controls

      设置或返回音频/视频是否显示控件

      currentTime

      返回当前音频/视频的长度

      duration

      返回当前音频的长度（以秒计）

      src

      设置或返回音频元素的当前来源

      volume

      设置或返回音频的音量

      buffered

      返回表示音频已缓冲部分的 TimeRanges 对象

      playbackRate

      设置或返回音频的当前播放速度

      error

      返回表示音频错误状态的 MediaError 对象

      readyState

      返回音频的当前就绪状态