如果你做过前端，多半遇到过这种场景：产品要一个直播间，视频能播，但延迟三秒；或者要在页面里嵌一个播放器，结果 iOS 上一堆自动播放限制；再或者用户上传的视频格式不对，需要在前端转码或者截一帧封面图。这些需求最后都落到同一个地方——你对音视频这一层到底懂多少。

这门 2021 年的音视频开发进阶年课第一季，讨论的正是这类问题的底层答案。它不是那种教你调几个 API 就完事的教程，而是把浏览器播放、编解码、传输这几条线拆开来看。下面从缺口的角度说清楚，这门课对谁有用、怎么用。

先确认自己缺的是哪一块

音视频的问题表面相似，根子上分三类，对号入座比盲目跟课重要得多。

只会用播放器，不懂协议。能用 video 标签放 HLS，但被问到为什么同一个 m3u8 在 Chrome 上流畅、在 Safari 上要等半天，答不上来。
卡在数据流上。知道要在 WebSocket 和 WebRTC 之间选，但说不清两者的传输模型差别，不知道哪种场景该用哪个。
卡在编解码上。听说过 H.264、H.265、AAC、Opus，但不知道 YUV 和 RGB 为什么换来换去，不理解为什么转封装比转码快那么多。

这三类缺口对应的学习顺序不一样。全栈前端如果只做播放展示，重点在协议和容器格式；要做低延迟互动，传输和信令绕不开；要处理用户上传，编解码和采样是基础。看完第一季，至少在遇到问题时能判断出「这是哪一层的事」。

这门课在讲什么

主题集中在音视频的处理与播放，三个方向贯穿始终。一个是编解码原理，讲清楚一帧画面如何被压缩、为什么会有 I 帧和 P 帧的区别、关键帧对拖动进度条意味着什么。一个是流媒体传输，涉及常见的推流拉流模型和 Web 端能落地的传输方案。还有一个是Web 端播放优化，包括播放器加载、首帧时间、卡顿这几个实际指标上能做的调整。

这些内容的价值在于，它把「前端音视频」从黑盒变成了可拆解的对象。播放失败时，你能顺着「容器格式对不对 → 编码浏览器支不支持 → 网络分片到没到位」这条链去排查，而不是反复刷新页面。

看完应该能回答的问题

检验学没学进去，看能不能独立回答下面这几个：为什么 HLS 在 Safari 上是原生支持，在别的浏览器要靠 MSE？为什么同一段视频转封装几乎瞬间完成，转码却要等几分钟？为什么低延迟直播场景下，RTMP 逐渐让位给基于 UDP 的方案？关键帧间隔设置得太长，用户拖动进度条时会发生什么？

这几个问题覆盖了编码、传输、播放三层。如果看完只能背出概念，却答不上这些，说明练习没跟上。

练习建议

光看不动手，音视频这块基本记不住。建议按这个节奏走：先拿一段本地视频，用浏览器的开发者工具观察它的编码格式和分片结构；再搭一个最简的页面把播放在本地跑起来，记录首帧加载耗时；然后人为制造一次失败——换一个浏览器不支持的编码格式，看报错信息长什么样，再回头去查原因。

这套练习不需要复杂环境，但对理解传输和编码两层的关系帮助很大。真正做到能定位问题，才算补上了这个缺口。

音视频不是靠一两门课就能吃透的方向，第一季能帮你把框架搭起来，剩下的靠具体项目里不断碰壁。先看清自己缺哪块，再决定这门课值不值得花时间。