Web多媒体基础知识

编码格式

图像
- 分辨率：用于确定一个图像的像素数据，就是指水平和垂直方向上图像所拥有的像素个数
- 深度：指存储每个像素所需要的比特数。决定了图像每个像素可能的颜色数或可能的灰度级数
视频
- 帧率：视频单位时间内所包含的视频帧的数量
- 码率：视频单位时间内所传输的数据量，一般用kbps表示

I帧：帧内编码帧，就是解码只依赖于自己本身
P帧：前向预测编码帧，解码依赖于前一阵
B阵：双向预测编码帧，解码不仅依赖于前面帧还依赖于后一帧，

为什么需要编码

当一幅分辨率为1290 * 1080的图片被渲染出来时，占用空间是：
1290 * 1080 * 24 / 8 = 6220800Byte 差不多6.0M
如果是帧率为30FPS时长90分钟的视频，容量大小将会达到933G，这是很难接受的
所以需要进行压缩，压缩就是通过编码

空间冗余
- 提取相同像素RGB的值，只需知道数量就能压缩存储
时间冗余
- 后一帧内容与前一帧差别不大时，只需存储相同内容
编码冗余
- 将元素用简单的编码进行表示，以减少存储空间
视觉冗余
- 肉眼难以察觉的色彩变化可以通过减少像素个数压缩体积

主流编码格式标准：

封装编码

封装格式：存储音视频、图片或者字幕信息的一种容器
编码内不包含分辨率、轨道是否包含音频或视频这些信息，所以需要依赖于封装格式
也便于存储和传输

HTML中的多媒体元素

<video> & <audio>标签

<body>
//写入<video>标签内
    <video src="./video.mp4" muted autoplay controls width=500 height=500></video>
    //嵌套src，能放入多个元素
    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
    </video>
    
    //音频资源
    <audio>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
    </audio>
</body>