diff --git a/Frontend/library/src/VideoPlayer/StreamController.ts b/Frontend/library/src/VideoPlayer/StreamController.ts index 813ed900..879ab1a2 100644 --- 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 index d389a06d..af6089a4 100644 --- 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 index 167e624a..b18b31b1 100644 --- 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(); }