Firefox执行play()后HTMLVideoElement currentTime仍为0的原因排查

这个问题的核心是不同浏览器对play()返回Promise的解析时机定义不同：

• Firefox的逻辑是：play()返回的Promise仅在播放请求被浏览器接受（未被自动播放策略拦截）时就会resolve，此时视频可能还处于加载初始帧的阶段，时间轴还未开始推进，所以currentTime保持初始值0。
• 像Chrome这类浏览器则会等到视频实际开始播放（第一帧渲染完成、时间轴开始更新）后，才会让play()的Promise resolve，这时currentTime已经有正确的非零值。

简单说就是，Firefox把“播放请求通过”和“实际开始播放”分成了两个阶段，而play()的Promise只对应前一个阶段；其他浏览器则把这两个阶段合并到了Promise的resolve时机里。

如果要在Firefox中获取到正确的currentTime，可以等视频的timeupdate事件触发后再读取，或者检查视频的readyState是否达到HAVE_CURRENT_DATA（值为2），示例代码调整如下：

private async playVideo(): Promise<void> {
  this.htmlVideoElement.muted = true;
  try {
    await this.htmlVideoElement.play();
    // 等待timeupdate事件确保时间轴已更新
    await new Promise(resolve => {
      const handleTimeUpdate = () => {
        this.htmlVideoElement.removeEventListener('timeupdate', handleTimeUpdate);
        resolve(null);
      };
      this.htmlVideoElement.addEventListener('timeupdate', handleTimeUpdate);
    });
    console.log('Current time: ', this.htmlVideoElement.currentTime);
    this.cdr.detectChanges();
  } catch (err) { console.log('Error: ', err) }
}

内容的提问来源于stack exchange，提问作者AlexBor