火狐 |执行 play() 后 HTMLVideoElement currentTime 0

Question

在 Firefox Web 浏览器中，当我检查 HTMLVideoElement currentTime 时，即使在执行 play() 方法后，我也得到 0：

private async playVideo(): Promise<void> {
  this.htmlVideoElement.muted = true;
  try {
    await this.htmlVideoElement.play();
    console.log('Current time: ', this.htmlVideoElement.currentTime); // 0 in Firefox
    this.cdr.detectChanges();
  } catch (err) { console.log('Error: ', err) }
}

知道为什么这种情况只发生在 Firefox 中吗？

Answer 1

您目前似乎依赖于

.play()

函数的 Chrome 特定实现，其中

currentTime

在调用该函数后立即大于 0。但不能保证它在浏览器之间是一致的。你应该推迟这项检查。

private async playVideo(): Promise<void> {
  this.htmlVideoElement.muted = true;
  try {
    await this.htmlVideoElement.play();
    // delay by 1 millisecond
    await new Promise(resolve => setTimeout(resolve, 1));
    // Now the currentTime should be consistently above 0
    console.log('Current time: ', this.htmlVideoElement.currentTime);
in Firefox
    this.cdr.detectChanges();
  } catch (err) { console.log('Error: ', err) }
}