Web 中的多媒体 | 青训营笔记这是我参与「第四届青训营」笔记创作活动的的第13天，整理一下之前课上关于 Web 多

这是我参与「第四届青训营」笔记创作活动的的第13天，整理一下之前课上关于 Web 多媒体的知识。

一、本节课主要内容

编码格式
封装格式
多媒体元素和扩展 API

二、详细知识点介绍

1. 编码格式

基本概念
- 图像分辨率：用于确定组成一幅图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数
- 图像深度：指存储每个像素所需要的比特数，其决定了图像的每个像素可能的颜色数或可能的灰度级数
- 视频分辨率：视频每一帧的图像分辨率
- 视频帧率：视频单位时间内所包含的视频帧的数量
- 视频码率：指视频单位时间内传输的数据量，一般用 kbps 来表示，即千位每秒
- I 帧、P 帧、B 帧：I 帧即帧内编码帧，其解码不依赖于任何其它帧；P 帧即前向预测编码帧，其编码需依赖于前一帧；B 帧即双向预测编码帧，其编码依赖于前后的视频帧。
- GOP（Group of Picture）：两个 I 帧之间的间隔
为什么要编码：对视频中冗余的数据进行去除或压缩，以减少视频存储和传输的资源消耗
- 空间冗余：大面积单一重复的颜色
- 时间冗余：前后两帧大部分的像素没有发生变化
- 编码冗余：压缩图像深度（如黑白照片只需要存储两种颜色信息）
- 视觉冗余：去除人眼无法识别的颜色
编码数据处理流程

编码格式
- H262：主要用于数字电视、VCD 光盘等
- H264：常用于 PC 端视频编码
- H265：常用于移动端视频编码
- H266：主要用于 VR 等

2. 封装格式

什么是封装格式：存储音视频、图片或字幕信息的一种容器，便于存储和传输
常见视频格式

3. 多媒体元素和扩展 API

<video>标签/<audio>标签
- 常用属性
  - src：指定视频源（也可以使用<source src="xxx">标签指定多个源）
  - autoplay：是否在加载完成后自动播放视频/音频
  - controls：是否显示控件
  - currentTime：设置或获取视频/音频的当前播放位置（以秒为单位）
  - duration：获取视频/音频的总时长（以秒为单位）
  - volume：设置或获取视频/音频的音量
  - buffered：获取表示视频/音频所缓冲部分的TimeRange对象
  - playbackRate：设置或获取视频/音频播放的速度
  - readyState：获取视频/音频当前的就绪状态
- 常用方法
  - play()：播放视频/音频
  - pause()：暂停视频/音频
  - load()：重新加载视频/音频
  - canPlayType()：检测浏览器是否能播放指定格式的音频/视频类型
  - addTextTrack()：想视频/音频添加新的文本轨道
- 常用事件
  - canplay：可以开始播放视频/音频
  - play：开始播放视频/音频
  - playing：因缓存而暂停或停止后已就绪时触发
  - pause：暂停视频/音频
  - timeupdate：视频/音频播放位置变更时触发
  - seeking：用户开始移动/跳跃到视频/音频新位置时触发
  - waiting：视频由于需要缓存下一帧时触发
  - ended：播放结束时触发
媒体源扩展 API（Media Source Extensions，MSE）
- 用途
  - 无插件在 Web 端播放流媒体
  - 支持播放 HLS、FLV、MP4 等格式视频
  - 可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等
- 用法
  - 创建mediaSource实例
  - 创建指向mediaSource的 URL
  - 监听sourceopen事件
  - 创建sourceBuffer
  - 向sourceBuffer中加入数据
  - 监听updateend事件

const url = "https://vd4.bdstatic.com/mda-ngjbehw9vhgtc747/sc/h264/1658304239144620207/mda-ngjbehw9vhgtc747.mp4"
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
const mediaSource = new MediaSource()
const video = document.querySelector("video")
video.src = URL.createObjectURL(mediaSource)

function fetch(callback) {
  const xhr = new XMLHttpRequest()
  xhr.open("get", url)
  xhr.responseType = "arraybuffer"
  xhr.onload = () => {
    callback(xhr.response)
  }
  xhr.send()
}

mediaSource.addEventListener("sourceopen", () => {
  console.log(mediaSource.readyState) // open
  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec)
  fetch((buf) => {
    sourceBuffer.addEventListener("updateend", () => {
      console.log(mediaSource.readyState) // ended
      mediaSource.endOfStream()
      video.play()
    })
    sourceBuffer.appendBuffer(buf)
  })
})

播放器播放流程

流媒体协议

目前 HLS 被广泛地应用于视频点播和直播

三、课后个人总结

这节课上老师讲解了和 Web 开发中多媒体相关的知识，从多媒体的编码格式到如何使用多媒体技术。正好手头还有一个关于音乐播放的项目，可以好好研究一下这方面的知识，后续再总结更深入的知识~

Web 中的多媒体 | 青训营笔记

一、本节课主要内容

二、详细知识点介绍

1. 编码格式

2. 封装格式

3. 多媒体元素和扩展 API

三、课后个人总结

四、引用参考