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?
2
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) }
}
1