先说这门课能帮你解决什么

H5 页面里嵌直播，是这几年运营活动、电商带货、教育课程的标配功能。但真正落地的坑不少：视频卡顿、首屏白屏、移动端兼容差，小程序里又涉及资质和接口限制。很多人卡在"知道原理但写不出来"，或者反过来，东拼西凑 demo 跑通了，换场景就崩。

这门课的价值在于从直播协议讲起，先把 HLS、RTMP、FLV 这三种主流流的传输机制吃透，再进入 video 标签的属性和事件，最后落到 H5 和微信小程序两套真实开发场景。学完你能独立把一套直播播放功能从原理到落地完整做出来，而不是只会套现成的播放器 SDK。如果你正在准备做一个直播带货页面、或者要在小程序里接入实时互动功能，这门课刚好覆盖你需要的部分。

适合什么基础

有 HTML/JS 基础、对前端框架有一定了解的同学可以看。课程前半部分会补一些网络协议的概念，后半部分是纯代码实战。如果你之前没用过 video 标签做过项目，或者对直播流的概念比较模糊，这门课刚好能帮你把这块拼图补齐。不适合零基础完全没碰过程序的人，也不适合已经熟练开发直播系统的高级前端。

建议怎么学

先看第 2 章，搞清楚直播流是怎么从推流端到播放端跑通的，这部分理解了后面代码才不像是无源之水。然后进第 3 章把 video 标签的属性和事件过一遍，别跳过事件部分，实战时处理加载、错误、暂停等状态全靠它。第 4 章了解直播流怎么生产出来，有助于你理解播放端要应对的异常情况。

实战部分是核心，第 5 章 H5 和微信小程序分开讲，video.js 和 hls.js、flv.js 都有覆盖。建议按顺序动手做一遍，小程序那节单独看，因为涉及平台特定的接口和资质问题。资料配合练习的方式是每看完一节就自己手敲一遍代码，不要直接复制粘贴，遇到问题再回看讲解。第 7 章关于前端职业方向的内容不算技术内容，学有余力再看。

学完能独立做什么

你能够独立在 H5 页面里接入不同协议的直播播放，处理常见的播放异常和错误恢复，在微信小程序里完成直播功能的完整开发流程。具体场景包括：搭建一个电商直播间的视频播放模块、为教育课程添加实时互动直播功能、在运营活动中集成自定义样式的视频播放器。这些能力在面试中也是加分项，因为直播播放涉及网络协议、性能优化、多端适配等多个维度的技术问题。

课程目录

第1章 课程介绍 试看 1 节 | 11分钟 1-1 课程导学 (10:39).mp4
 第2章 直播工作原理 试看 4 节 | 36分钟 2-1 直播原理-HLS-1 (15:09).mp4
 2-2 直播原理-HLS-2 (11:52).mp4
 2-3 直播原理-RTMP-FLV (06:12).mp4
 2-4 直播原理总结 (02:21).mp4
 第3章 Video详解 7 节 | 72分钟 3-1 video基础认识 (03:57).mp4
 3-2 准备工作 (08:35).mp4
 3-3 video属性和方法（1） (07:35).mp4
 3-4 video属性和方法（2） (07:36).mp4
 3-5 video属性和方法（3） (09:20).mp4
 3-6 video事件（1） (18:48).mp4
 3-7 video事件（2） (15:14).mp4
 第4章 直播流的制作 4 节 | 46分钟 4-1 制作直播流-1 (14:26).mp4
 4-2 制作直播流-2 (08:41).mp4
 4-3 制作直播流-方法一 (11:29).mp4
 4-4 制作直播源-方法二 (10:59).mp4
 第5章 H5与微信小程序直播实战 9 节 | 117分钟 5-1 video.js实战-1 (13:19).mp4
 5-2 video.js实战-2 (14:47).mp4
 5-3 video.js实战-3 (07:51).mp4
 5-4 hls.js实战-1 (05:04).mp4
 5-5 hls.js实战-2 (11:54).mp4
 5-6 hls.js实战-3 (16:04).mp4
 5-7 hls.js实战-4 (13:21).mp4
 5-8 flv.js实战 (09:40).mp4
 5-9 微信小程序直播实战 (24:04).mp4
 第6章 课程总结 1 节 | 14分钟 6-1 课程总结 (13:21).mp4
 第7章 直播视频《前端人的危机如何破解》 7 节 | 85分钟 7-1 1《前端人的危机如何破解》- 内容安排 (11:26).mp4
 7-2 2《前端人的危机如何破解》- 如何学习（入门级） (13:46).mp4
 7-3 3《前端人的危机如何破解》- 如何面试（入门级） (20:35).mp4
 7-4 4《前端人的危机如何破解》-如何晋升（入门级） (09:29).mp4
 7-5 5《前端人的危机如何破解》-如何学习（中高级） (10:47).mp4
 7-6 6《前端人的危机如何破解》- 如何晋升（中高级） (12:28).mp4
 7-7 7《前端人的危机如何破解》- 如何晋升（中高级） (06:21).mp4