frontend: Improves video autoplay

Updates video player to attempt unmuted autoplay when necessary

If autoplay fails, mutes the video and retries, improving user experience.
This commit is contained in:
Carlos Santos 2025-10-08 11:29:14 +02:00
parent 78d3d36888
commit 5d8343d75d
2 changed files with 15 additions and 2 deletions

View File

@ -9,7 +9,6 @@
controlsList="nodownload"
playsinline
autoplay
[muted]="viewportService.isMobileView()"
[disablePictureInPicture]="viewportService.isMobileView()"
class="video-player"
(loadeddata)="onVideoLoaded()"

View File

@ -69,7 +69,7 @@ export class RecordingVideoPlayerComponent implements OnDestroy {
constructor(public viewportService: ViewportService) {}
onVideoLoaded() {
async onVideoLoaded() {
this.isVideoLoaded = true;
this.hasVideoError = false;
this.videoLoaded.emit();
@ -78,6 +78,20 @@ export class RecordingVideoPlayerComponent implements OnDestroy {
if (this.viewportService.isMobileView()) {
this.resetControlsTimeout();
}
// try play unmuted and if it fails, mute and play again
if (this.videoPlayer && this.videoPlayer.nativeElement) {
try {
await this.videoPlayer.nativeElement.play();
// Autoplay started successfully without muting
} catch (error) {
// Autoplay was prevented, mute and try again
this.videoPlayer!.nativeElement.muted = true;
this.videoPlayer!.nativeElement.play().catch((err) => {
console.error('Error playing video after muting:', err);
});
}
}
}
onVideoError() {