Hls.js在iOS 18上的视频循环播放问题分析与解决方案

问题背景

Hls.js是一个流行的JavaScript库，用于在浏览器中实现HTTP Live Streaming (HLS)协议的视频播放。近期在iOS 18.0.1及以上版本中，开发者报告了一个关于视频循环播放的严重问题：当视频播放到结尾并尝试循环时，视频会卡在最后一帧，控制台出现bufferStalledError错误，并且代码陷入某种循环状态。

问题现象

在iOS 18.x版本的Safari浏览器中，当使用Hls.js播放带有loop属性的视频时，会出现以下异常行为：

1. 视频播放到结尾后无法正常循环
2. 视频停留在最后一帧
3. 控制台输出bufferStalledError错误
4. 代码陷入无限循环状态，不断尝试调用mediaSource.endOfStream()
5. 在Hls.js的canary版本中问题出现频率较低，但仍存在

技术分析

通过日志分析，我们可以清晰地看到问题发生的完整流程：

1. 视频正常加载和播放
2. 播放到结尾时，Hls.js正确调用了mediaSource.endOfStream()
3. 浏览器没有正确触发"ended"事件
4. 由于loop属性设置，系统尝试重新开始播放
5. 但此时缓冲区已空，导致bufferStalledError错误
6. 系统陷入不断尝试恢复播放的循环中

核心问题在于iOS 18的WebKit引擎在处理MediaSource和视频循环时存在缺陷，特别是在调用endOfStream()后没有正确触发相关事件。

解决方案

针对这个问题，Hls.js团队已经提出了几种解决方案：

1. 使用Hls.js v1.6.0-beta.2或更高版本，这些版本增加了MEDIA_ENDED事件检测，可以绕过浏览器自身的事件触发问题

2. 技术团队发现了一个有效的临时解决方案：延迟调用MediaSource.endOfStream()，直到currentTime超过缓冲区的起始位置。这种方法可以有效避免iOS上的播放停滞问题

3. 对于开发者来说，可以监听MEDIA_ENDED事件而不是浏览器的"ended"事件，以获取更可靠的播放结束通知

最佳实践建议

1. 确保音频和视频轨道的结束时间严格对齐
2. 在iOS设备上实现自定义的循环逻辑，而不是依赖浏览器的loop属性
3. 使用Hls.js提供的高级事件监听机制，而不是原生的HTML5视频事件
4. 考虑在检测到iOS环境时，采用特定的错误恢复策略

总结

iOS 18上的视频循环播放问题是一个典型的浏览器兼容性问题，Hls.js团队通过深入分析找到了问题的根源并提供了有效的解决方案。开发者应当关注Hls.js的最新版本更新，并采用推荐的最佳实践来确保在各种浏览器环境下的稳定播放体验。随着Hls.js的持续改进，这类平台特定的问题将得到更好的解决。