neoris/openvidu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend: Improves video autoplay

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/projects/shared-meet-components/src/lib/components/recording-video-player/recording-video-player.component.html
View File

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

16
frontend/projects/shared-meet-components/src/lib/components/recording-video-player/recording-video-player.component.ts
View File

@ -69,7 +69,7 @@ export class RecordingVideoPlayerComponent implements OnDestroy {
constructor(public viewportService: ViewportService) {} constructor(public viewportService: ViewportService) {}
onVideoLoaded() { async onVideoLoaded() {
this.isVideoLoaded = true; this.isVideoLoaded = true;
this.hasVideoError = false; this.hasVideoError = false;
this.videoLoaded.emit(); this.videoLoaded.emit();
@ -78,6 +78,20 @@ export class RecordingVideoPlayerComponent implements OnDestroy {
if (this.viewportService.isMobileView()) { if (this.viewportService.isMobileView()) {
this.resetControlsTimeout(); 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() { onVideoError() {