diff --git a/src/components/ha-hls-player.ts b/src/components/ha-hls-player.ts
index 332e11f0d3..4d5ad2a57e 100644
--- a/src/components/ha-hls-player.ts
+++ b/src/components/ha-hls-player.ts
@@ -59,6 +59,15 @@ class HaHLSPlayer extends LitElement {
 
   private static streamCount = 0;
 
+  private _handleVisibilityChange = () => {
+    if (document.hidden) {
+      this._cleanUp();
+    } else {
+      this._resetError();
+      this._startHls();
+    }
+  };
+
   public connectedCallback() {
     super.connectedCallback();
     HaHLSPlayer.streamCount += 1;
@@ -66,10 +75,15 @@ class HaHLSPlayer extends LitElement {
       this._resetError();
       this._startHls();
     }
+    document.addEventListener("visibilitychange", this._handleVisibilityChange);
   }
 
   public disconnectedCallback() {
     super.disconnectedCallback();
+    document.removeEventListener(
+      "visibilitychange",
+      this._handleVisibilityChange
+    );
     HaHLSPlayer.streamCount -= 1;
     this._cleanUp();
   }
diff --git a/src/components/ha-web-rtc-player.ts b/src/components/ha-web-rtc-player.ts
index 7d9528f38a..e44b9b0001 100644
--- a/src/components/ha-web-rtc-player.ts
+++ b/src/components/ha-web-rtc-player.ts
@@ -61,6 +61,14 @@ class HaWebRtcPlayer extends LitElement {
 
   private _candidatesList: RTCIceCandidate[] = [];
 
+  private _handleVisibilityChange = () => {
+    if (document.hidden) {
+      this._cleanUp();
+    } else {
+      this._startWebRtc();
+    }
+  };
+
   protected override render(): TemplateResult {
     if (this._error) {
       return html`<ha-alert alert-type="error">${this._error}</ha-alert>`;
@@ -88,10 +96,15 @@ class HaWebRtcPlayer extends LitElement {
     if (this.hasUpdated && this.entityid) {
       this._startWebRtc();
     }
+    document.addEventListener("visibilitychange", this._handleVisibilityChange);
   }
 
   public override disconnectedCallback() {
     super.disconnectedCallback();
+    document.removeEventListener(
+      "visibilitychange",
+      this._handleVisibilityChange
+    );
     this._cleanUp();
   }