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:
parent
78d3d36888
commit
5d8343d75d
@ -9,7 +9,6 @@
|
||||
controlsList="nodownload"
|
||||
playsinline
|
||||
autoplay
|
||||
[muted]="viewportService.isMobileView()"
|
||||
[disablePictureInPicture]="viewportService.isMobileView()"
|
||||
class="video-player"
|
||||
(loadeddata)="onVideoLoaded()"
|
||||
|
||||
@ -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() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user