一、业务选择 video.js+HLS 做网页播放器的现状
很多业务不会从零手写播放器，会选择成熟开源组件 video.js，搭配 hls.js 插件来实现网页播放 M3U8。video.js 封装了 UI 控制栏、全屏、音量、多语言等能力，省去大量界面开发工作。
但是很多新手直接网上复制 demo 片段，本地简单 demo 跑通，集成到实际业务项目，就出现各种奇怪问题：偶现黑屏、实例销毁不干净、内存泄漏、Safari 原生 HLS 冲突、切换视频源异常、控制台一堆警告。
网上很多简短示例只演示简单播放，缺少组件销毁、浏览器兼容、错误捕获等生产环境需要的逻辑。很多坑并不是组件 BUG，而是集成方式不对。
调试 video.js 集成 hls.js 相关问题，我会使用 m3u8live.cn，先确认待测 M3U8 流在原生 hls.js 环境可以正常播放，排除流本身故障，再排查 video.js 集成代码。
二、video.js + hls.js 高频踩坑
坑 1：Safari 浏览器同时启用 video‑js‑hls 插件
现象：iOS Safari 播放出现偶现异常。 根因：Safari 自带原生 HLS 解码能力，不需要 hls.js。部分新手没有做判断，所有浏览器全部加载 hls 插件。在 Safari 环境同时启用插件和原生能力，两套逻辑互相冲突，偶现播放异常。
处理：只有非 Safari 浏览器才初始化 hls 插件；Safari 直接使用 video.js 原生 HLS 支持。
坑 2：组件销毁只调用 player.dispose ()，未处理底层 hls 实例
现象：弹窗关闭、路由跳转，只执行 player.dispose () 销毁播放器实例。部分版本下底层 hls 实例没有完整执行 stopLoad、destroy，后台依旧请求 TS 分片，内存持续上涨。
注意：业务中除了调用 player.dispose ()，还需要拿到内部 hls 实例，做完整销毁逻辑。
坑 3：切换 M3U8 视频源的方式错误
很多新手直接修改 video 标签 src 属性。video.js 项目不建议直接操作 DOM 的 src，要使用 player.src () 方法传入 M3U8 地址。直接修改 DOM src，会导致插件状态错乱，出现黑屏。
坑 4：hls 配置参数传入时机错误
把 hls 相关配置写在 setOptions 的时机不对，初始化完成之后再修改配置不生效。hls 的自定义参数需要在插件初始化阶段传入。
坑 5：没有捕获播放错误，直接忽略异常
只实现播放逻辑，没有监听 player.error () 事件。出现解密失败、分片加载失败，页面没有任何提示，用户看到黑屏，控制台报错。
三、简单开发注意事项
- 做浏览器判断，Safari 环境不启用 hls 插件，使用浏览器原生 HLS 能力；Chrome、Edge、Firefox 启用 hls.js 插件。
- 销毁播放器：优先调用 player.dispose ()；同时获取内部 hls 实例，执行完整 stopLoad‑detachMedia‑destroy，实例置为 null。
- 切换视频源，统一使用
player.src("xxx.m3u8")，不要手动修改 video DOM 的 src 属性。 - hls 的 maxBufferLength、fragLoadingTimeout 等参数，在插件初始化的时候传入，初始化完成之后修改配置不会生效。
- 监听 player.error 事件，捕获播放异常，给用户友好提示。
四、排查实操步骤
第一步，待测 M3U8 链接粘贴网页调试工具，确认原生 hls.js 环境播放正常，排除流的问题。 第二步，复现业务页面 BUG，查看控制台，确认是否是 Safari 下错误加载 hls 插件。 第三步，反复开关播放器，观察浏览器内存与网络面板，确认销毁之后分片请求全部停止。
五、总结
video.js 搭配 hls.js 可以快速搭建网页 M3U8 播放器，但集成的时候有不少细节。Safari 不要强行启用 hls 插件；销毁播放器不能只调用 dispose，要处理底层 hls 实例；切换源不要直接修改 DOM 的 src 属性。借助网页调试工具确认 M3U8 流本身没有问题，再排查集成逻辑，避免把集成问题误认为 M3U8 分片的故障。