HLS.js 播放 H.264 流媒体异常问题分析与解决方案

问题背景

在使用 HLS.js 播放 H.264 编码的实时流媒体时，开发者遇到了播放异常的问题。具体表现为在 Chrome 浏览器中播放几秒后停止，而在 Firefox 中则能正常播放。该问题出现在多个平台（Android、Mac 和 Linux）的 Chrome 浏览器上。

技术细节分析

流媒体生成方式

开发者使用 FFmpeg 从 RTSP 源生成 HLS 流：

ffmpeg -i rtsp://192.168.25.254/Preview_01_main -c:v copy -c:a copy -hls_time 2 -hls_list_size 10 -hls_flags delete_segments -start_number 1 output.m3u8

流媒体参数

通过 FFprobe 分析生成的 TS 片段，显示视频流为：

• 编码格式：H.264 High Profile
• 分辨率：2560x1920
• 帧率：20fps
• 时间基准：90k tbn

音频流为：

• 编码格式：AAC-LC
• 采样率：16kHz
• 单声道

问题现象

在 Chrome 浏览器中，控制台显示以下关键错误信息：

1. 视频片段重叠警告：

AVC: 36 ms (-3215dts) overlapping between fragments detected at 16.025
AVC: 39 ms (-3469dts) overlapping between fragments detected at 18.027

2. 最终导致播放停止的错误：

Failed to execute 'appendBuffer' on 'SourceBuffer': The HTMLMediaElement.error attribute is not null.

根本原因

经过深入分析，问题的根本原因是摄像机的固件问题。H.264 流中的时间戳存在异常，导致：

1. 片段间出现时间戳重叠
2. Chrome 的 MediaSource 实现对此更为敏感
3. 最终触发了浏览器的保护机制，停止播放

解决方案

开发者通过以下步骤解决了问题：

1. 检查并更新摄像机固件
2. 确认更新后生成的流媒体时间戳恢复正常
3. 验证 HLS.js 在所有浏览器中都能正常播放

技术建议

对于类似问题，建议开发者采取以下排查步骤：

1. 流媒体分析：

   • 使用 FFprobe 检查时间戳连续性
   • 验证关键帧间隔是否符合 HLS 规范

2. 编码参数优化：

   • 确保 GOP 结构合理
   • 检查 B 帧设置是否可能导致时间戳问题

3. 播放器配置：

   • 启用 HLS.js 调试日志
   • 监控 MediaSource 状态变化

4. 多浏览器测试：

   • 比较不同浏览器的行为差异
   • 检查各浏览器对 MediaSource 的实现差异

总结

HLS.js 作为一款强大的 JavaScript HLS 播放器，对源流媒体的质量有较高要求。当遇到播放异常时，应从源流媒体质量、编码参数和播放环境等多方面进行综合排查。本案例表明，即使是硬件设备（如摄像机）的固件问题，也可能导致流媒体播放异常，这提醒我们在流媒体系统集成中需要全面考虑各个环节的兼容性和稳定性。