前端音视频学习（一）- 基本概念

本篇主要介绍音视频开发中的最基础概念，包括文件结构、核心术语、编码格式以及浏览器层面的基础限制。

一、视频文件结构

一个视频文件一般是由文件信息和音视频文件组成，视频文件的结构因不同封装格式而不同。视频格式分为封装格式和编码格式，封装格式决定的是视频文件的结构，音视频数据块的大小等，而编码格式决定的是音视频的压缩的方式及算法。前端开发中主要关注的是封装格式，即常见的 .mp4、.webm、.ogg、.m3u8 等文件类型。

1. 封装格式与编码格式

封装格式 ：决定了视频文件的结构（如何存放数据块）。常见格式：.mp4, .webm, .mkv, .flv。
编码格式 ：决定了音视频数据的压缩算法。常见格式：H.264 (AVC), H.265 (HEVC), VP9, AV1。

比喻：封装格式就像一个"文件夹"，编码格式则是文件夹里"文档的压缩方式"。

2. 主流封装格式对比

格式	全称	是否浏览器原生支持	特点与说明
`.mp4`	MPEG-4	支持最广泛	首选格式，兼容性好，适合网页播放
`.webm`	Web Media	Chrome / Firefox 支持	Google 推出，体积小，适合 Web 用途
`.ogg` / `.ogv`	Ogg Theora	部分支持（Firefox 好）	开源格式，支持不如 MP4
`.m3u8`	HLS（HTTP Live Streaming）	需 `hls.js` 支持	Apple 开发的流媒体格式，可边播边看

二、核心基础术语

1. 视频核心参数

码率 (Bitrate) ：每秒传输的数据量（单位 Mbps 或 kbps）。
- CBR (Constant) : 固定码率，适合直播。
- VBR (Variable) : 动态码率，复杂画面给高码率，节省空间。
帧率 (FPS) ：每秒显示的画面张数。24fps 是电影感，60fps 是丝滑游戏感。
分辨率 (Resolution) ：画面的像素大小，如 1920x1080 (1080P)。
GOP (Group of Pictures) ：一组以 I帧（关键帧） 开头的画面序列。
- I帧 (Intra) : 关键帧，完整图片。
- P帧 (Predicted) : 差异帧，只记录与前一帧的差异。
- B帧 (Bi-directional) : 双向差异帧，压缩率最高，但解码最累。
- 注意：GOP 越长，压缩率越高，但跳转（Seek）越慢，直播延迟越高。

2. 音频核心参数

采样率 (Sample Rate) ：每秒记录声音样本的次数（如 44.1kHz, 48kHz）。

音频的最小单位不是一帧，而是采样。采样是当前一刻声音的声音样本，样本是需要经过数字转换才能存储为样本数据。数据转换时会根据位深度 转换，而位深度是存储单个样本的数据大小。位深度越大意味着声音的还原度越高。

过高的位深度需要特殊软件和硬件设备才能播放。常用的位深度有：8bit,16bit,24bit 等。音视频处理时，低位深度转为高位深度不会提升音质。
位深 (Bit Depth) ：每个样本的精度（如 16bit, 24bit）。
声道 (Channels) ：同时记录多个位置的声音采样数据；多个声道的样本数据会按声道排列顺序记录。

3. 颜色空间 (Color Space)

RGB: 屏幕显示的原理（红绿蓝）。
YUV: 视频压缩原理。Y 代表亮度，UV 代表色度。
- YUV 4:2:0: 常见的压缩采样方式，利用人眼对亮度敏感、色度不敏感的特性。

三、常见视频编码格式（压缩算法）

播放视频文件时，需要按顺序读取视频文件的一块块音视频数据，这个步骤叫做解封装（demux）,读出这些数据后并不能立即播放，因为这些数据是压缩过后的，所以还需要还原成能显示的图像或者音频采样才能播放，这个解压缩的步骤叫做解码（decode）,解码过程根据不同的编码格式不同而不同，但一般编码格式都有对应的解码器程序。

编码	名称	特点
H.264 (AVC)	最标准	兼容性最佳，几乎所有设备都支持硬解码。
H.265 (HEVC)	下一代	相同画质下体积比 H.264 小 50%，但浏览器兼容性较差，通常需硬件支持。
VP9 / AV1	开源标准	Google 主导，AV1 是未来趋势，无专利费，压缩率极高。

四、浏览器基础行为与限制

1. 自动播放策略 (Autoplay Policy)

静音自动播放 ：设置 muted 后，浏览器通常允许自动播放。
有声自动播放 ：必须由用户产生交互（点击、触摸）后才能触发。
最佳实践 ：<video autoplay muted playsinline>。

2. 移动端特殊属性

playsinline: 防止 iOS 在播放时强制全屏。
poster: 视频加载前的封面图，避免黑屏。
preload : metadata (只加载时长宽高), auto (尝试加载全视频)。

3. 调试

Chrome Media 面板 : F12 -> More tools -> Media。查看编解码、缓冲、丢帧等。
chrome://media-internals: 查看底层详细日志。