Merge pull request #409 from EpicGames/backport/UE5.4/pr-381

[UE5.4] Merge pull request #381 from New-Game-Plus/fix-video-autoplay
EpicGames · Oct 23, 2023 · d8007a3 · d8007a3
2 parents ac6cafa + 23eb260
commit d8007a3
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 20 deletions.
diff --git a/Frontend/library/src/VideoPlayer/StreamController.ts b/Frontend/library/src/VideoPlayer/StreamController.ts
@@ -18,6 +18,7 @@ export class StreamController {
     constructor(videoElementProvider: VideoPlayer) {
         this.videoElementProvider = videoElementProvider;
         this.audioElement = document.createElement('Audio') as HTMLAudioElement;
+        this.videoElementProvider.setAudioElement(this.audioElement);
     }
 
     /**

diff --git a/Frontend/library/src/VideoPlayer/VideoPlayer.ts b/Frontend/library/src/VideoPlayer/VideoPlayer.ts
@@ -18,6 +18,7 @@ declare global {
 export class VideoPlayer {
     private config: Config;
     private videoElement: HTMLVideoElement;
+    private audioElement?: HTMLAudioElement;
     private orientationChangeTimeout: number;
     private lastTimeResized = new Date().getTime();
 
@@ -52,8 +53,11 @@ export class VideoPlayer {
             );
         };
 
-        // set play for video
+        // set play for video (and audio)
         this.videoElement.onclick = () => {
+            if (this.audioElement != undefined && this.audioElement.paused) {
+                this.audioElement.play();
+            }
             if (this.videoElement.paused) {
                 this.videoElement.play();
             }
@@ -70,6 +74,10 @@ export class VideoPlayer {
         );
     }
 
+    public setAudioElement(audioElement: HTMLAudioElement) : void {
+        this.audioElement = audioElement;
+    }
+
     /**
      * Sets up the video element with any application config and plays the video element.
      * @returns A promise for if playing the video was successful or not.

diff --git a/Frontend/library/src/WebRtcPlayer/WebRtcPlayerController.ts b/Frontend/library/src/WebRtcPlayer/WebRtcPlayerController.ts
@@ -1109,26 +1109,30 @@ export class WebRtcPlayerController {
         this.pixelStreaming.dispatchEvent(new PlayStreamEvent());
 
         if (this.streamController.audioElement.srcObject) {
-            this.streamController.audioElement.muted =
-                this.config.isFlagEnabled(Flags.StartVideoMuted);
+            const startMuted = this.config.isFlagEnabled(Flags.StartVideoMuted)
+            this.streamController.audioElement.muted = startMuted;
 
-            this.streamController.audioElement
-                .play()
-                .then(() => {
-                    this.playVideo();
-                })
-                .catch((onRejectedReason) => {
-                    Logger.Log(Logger.GetStackTrace(), onRejectedReason);
-                    Logger.Log(
-                        Logger.GetStackTrace(),
-                        'Browser does not support autoplaying video without interaction - to resolve this we are going to show the play button overlay.'
-                    );
-                    this.pixelStreaming.dispatchEvent(
-                        new PlayStreamRejectedEvent({
-                            reason: onRejectedReason
-                        })
-                    );
-                });
+            if (startMuted) {
+              this.playVideo();
+            } else {
+                this.streamController.audioElement
+                    .play()
+                    .then(() => {
+                        this.playVideo();
+                    })
+                    .catch((onRejectedReason) => {
+                        Logger.Log(Logger.GetStackTrace(), onRejectedReason);
+                        Logger.Log(
+                            Logger.GetStackTrace(),
+                            'Browser does not support autoplaying video without interaction - to resolve this we are going to show the play button overlay.'
+                        );
+                        this.pixelStreaming.dispatchEvent(
+                            new PlayStreamRejectedEvent({
+                                reason: onRejectedReason
+                            })
+                        );
+                    });
+            }
         } else {
             this.playVideo();
         }