一、线上出 M3U8 播放 BUG，前后端经常互相拉扯
线上出现 M3U8 黑屏、卡顿、403 问题，最容易发生前后端互相推诿。前端说是后端 M3U8、分片、CDN 配置有问题；后端说本地 VLC 播放一切正常，是前端播放器写的有 BUG。
很多新手分不清边界，不知道哪些现象大概率属于后端 / 运维问题，哪些属于前端业务代码问题。当然，也存在很多边界场景，需要两边一起排查。
重要前提：判断的基准，拿干净的网页调试环境做对照。把同一个 M3U8 地址放到 m3u8live.cn 网页调试工具测试。
- 如果工具页面就复现故障：大概率偏向后端、CDN、切片、鉴权配置问题；
- 如果工具播放完全正常，只有自己业务页面出问题：大概率是前端业务代码问题。
这个对照思路可以解决大部分扯皮，先分清大方向，再细化定位。
二、大概率属于后端、运维、CDN 侧的问题
- M3U8、TS 分片、密钥 404、403、502；防盗链 token 过期；
- CORS 跨域响应头缺失，OPTIONS 预检请求处理错误；
- FFmpeg 切片输出问题：分片损坏、GOP 不对齐、PTS 时间戳错乱、targetDuration 设置错误；
- AES‑128 密钥接口访问失败，密钥字节长度不对；
- CDN 缓存旧的 M3U8、旧跨域头；Nginx 代理改写 M3U8 报文出错；
- Master 主索引子 M3U8 地址 404，多码率子流访问异常；
- 直播推流断连之后，缺少 #EXT‑X‑DISCONTINUITY 标记。
现象特征：换到干净网页调试工具，同样 M3U8 也复现故障。
三、大概率属于前端业务代码问题
- 浏览器直接写 video.src 加载 M3U8，Chrome/Edge 无法播放，忘记引入 hls.js；
- hls.js 实例没有完整销毁，只调用 pause ()，造成内存泄漏、后台持续请求分片；
- 实例多次复用，没有 new 新实例，切换视频源出现偶现异常；
- 没有做 Safari 浏览器兼容，全部浏览器强制初始化 hls.js；
- 页面混合内容，业务页面是 HTTPS，代码拼接出来 M3U8 / 密钥是 http 地址；
- 错误拦截 XHR 请求，修改 M3U8、TS 分片请求头；
- 不区分 fatal 致命错误，所有控制台警告全部弹窗提示播放失败。
现象特征：网页调试工具播放完全正常，只有自己业务页面出现 BUG。
四、需要前后端一起配合排查的边界场景
- WebView 环境下 Referer 丢失 403：后端防盗链策略，前端 WebView 是否配置请求头，两边都有关系；
- 弱网环境下频繁卡顿：后端分片参数、前端 hls.js 缓冲参数都会影响；
- 多码率自适应切换异常：后端 Master 索引 BANDWIDTH 参数，前端 hls.js ABR 配置共同影响；
- 浏览器后台标签页直播卡住：后端切片输出逻辑，前端 visibilitychange 事件处理。
五、新手排错简单工作流程
- 拿到故障 M3U8 地址，复制到网页调试工具，复现操作。
- 工具能复现故障：优先找后端 / 运维排查 M3U8、CDN、鉴权、切片。
- 工具播放完全正常：重点排查前端业务页面，hls.js 初始化、销毁、请求拦截、浏览器兼容。
- 边界场景，前后端协同，分别核对各自模块配置。
注意：VLC 播放器只能看分片媒体内容是否损坏，VLC 能播放不能作为判断责任归属的依据。
六、总结
M3U8 线上播放故障，不要上来就互相甩锅。先用干净网页调试工具做基准对照测试。工具能复现，偏向后端切片、CDN、鉴权、跨域配置；工具正常只有业务页面异常，优先排查前端业务代码。还有一部分边界场景，需要前后端配合排查。这套简单判断思路，能够减少大量前后端无效拉扯，提升线上问题定位效率。