Firefox | HTMLVideoElement currentTime 0 after executing play()

Question

In Firefox web browser when I check HTMLVideoElement currentTime I got 0 even after executing play() method on it:

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) }
}

Any idea why is this happening only in Firefox?

Answer 1

It seems like you are currently relying on the Chrome specific implementation of the .play() function, where the currentTime is greater than 0 right after the function was called. But there is no guarantee that it's consistent across the browsers. You should delay this check.

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) }
}