iOS H5 无音轨 MP4 播放时 currentTime 超前画面 2 s 的踩坑记录

技术日志

---

一、问题现象

1. 仅在 部分 iPhone Safari / WKWebView 中出现，Android 正常。
2. 视频流本身无音轨（纯 H.264）。
3. JS 取 video.currentTime 比实际画面快2秒左右，比如返回时间23秒，实际画面还在21的那里。
4. 同一设备，给文件加一条空白 AAC 音轨后，现象立即消失。

二、定位过程
Step1 排除服务器

• CDN 日志显示首包 200 ms 内返回，Range 0- 无误；Chrome 同链路无偏移。

Step2 排除前端代码

• 对比原生 <video> 与微信同层渲染，均复现；排除业务计时器干扰。

Step3 变量对照

• 有音轨 / 无音轨 互切 → 唯一变量“音轨有无”决定必现/消失。
• 多台 iPhone 13/14/15 抽样：iOS 18.0-18.3 必现率 100%，18.4-18.5 Beta 仍复现，未见官方修复日志。

Step4 社区验证

• WebKit Bugzilla 及国内开发者论坛均提到“静音视频首帧缓冲 20-30 M”导致时钟漂移，与观测吻合。

三、根因（推测）
iOS 媒体管道对“无音轨”流走静音省电策略，先缓冲一定字节才送渲染，而 WebKit 按解码时间戳回写 currentTime，造成“时间走、画面停”的 2 s 级偏差。

四、解决方案
方案 A（推荐，零 UI 改动）

1. 重新封装 MP4：
   ffmpeg -i pure_video.mp4 -f lavfi -i anullsrc=cl=stereo:r=44100 \
   -shortest -c:v copy -c:a aac -b:a 1k output.mp4
   仅增加 1 kb/s 空白音轨，文件体积几乎不变。
2. 上线后所有 iOS 版本恢复正常，首帧延迟降到 200 ms 内。

五、后续跟进

• 持续关注 WebKit Bugzilla ID 261384（静音视频时钟漂移），待官方修复后移除空音轨。
• 新增视频素材统一走“带音轨”转码模板，避免再次踩坑。