HLS.js 在 Edge 18 浏览器中的播放问题分析与解决方案

问题背景

HLS.js 是一个流行的 JavaScript 库，用于在浏览器中实现 HTTP Live Streaming (HLS) 播放功能。近期发现，在 Edge 18 浏览器中使用 HLS.js 播放特定视频流时会出现播放卡顿问题，表现为视频在播放 2 秒后停止缓冲。

问题现象

当用户在 Edge 18 浏览器中访问 HLS.js 的演示页面并尝试播放"Big Buck Bunny"测试流时，视频仅能播放约 2 秒便停止缓冲，无法继续播放。通过开发者工具检查发现，流控制器(stream-controller)卡在了"PARSED"状态，而源缓冲区(SourceBuffer)的"updating"状态也未能正常解析。

技术分析

经过版本比对和问题定位，发现此问题源于 HLS.js 1.5.0 版本引入的一项变更。具体来说，问题出现在对 ManagedMediaSource 功能的改进中。在 Edge 18 浏览器中，这些变更导致了以下问题：

1. 源缓冲区的更新状态无法正确解析
2. 流控制器无法从"PARSED"状态正常过渡
3. 缓冲过程被意外中断

解决方案

针对此问题，开发团队提供了两种解决方案：

1. 临时解决方案：在配置中添加 preferManagedMediaSource: false 参数，禁用 ManagedMediaSource 功能，回退到传统实现方式。

2. 永久解决方案：开发团队已在 HLS.js 1.5.7 版本中修复了此问题。更新到此版本或更高版本即可解决 Edge 18 浏览器的播放问题。

技术原理深入

这个问题的本质在于不同浏览器对 MediaSource API 的实现差异。Edge 18 使用的是较旧的实现方式，而 HLS.js 1.5.0 的变更主要针对现代浏览器的优化。具体来说：

• 现代浏览器能正确处理 ManagedMediaSource 的状态转换
• Edge 18 对某些异步操作的处理方式不同
• 缓冲区更新事件的触发机制存在差异

最佳实践建议

对于需要在多种浏览器（包括旧版浏览器）中实现 HLS 播放的开发者，建议：

1. 始终使用最新稳定版的 HLS.js
2. 针对特定浏览器版本进行充分测试
3. 考虑实现浏览器检测和差异化配置
4. 监控播放错误并准备备用方案

总结

HLS.js 作为 Web 端 HLS 播放的重要解决方案，其兼容性问题的快速响应和修复体现了开源社区的活力。通过这次问题的分析和解决，开发者可以更深入地理解不同浏览器对媒体播放实现的差异，并在实际项目中采取更稳健的实现策略。