diff --git a/src/components/ha-hls-player.ts b/src/components/ha-hls-player.ts
index ac05a64317..dbabf84b20 100644
--- a/src/components/ha-hls-player.ts
+++ b/src/components/ha-hls-player.ts
@@ -7,10 +7,11 @@ import {
PropertyValues,
TemplateResult,
} from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
import { nextRender } from "../common/util/render-status";
import { getExternalConfig } from "../external_app/external_config";
import type { HomeAssistant } from "../types";
+import "./ha-alert";
type HlsLite = Omit<
HlsType,
@@ -41,6 +42,8 @@ class HaHLSPlayer extends LitElement {
// don't cache this, as we remove it on disconnects
@query("video") private _videoEl!: HTMLVideoElement;
+ @state() private _error?: string;
+
private _hlsPolyfillInstance?: HlsLite;
private _exoPlayer = false;
@@ -58,6 +61,9 @@ class HaHLSPlayer extends LitElement {
}
protected render(): TemplateResult {
+ if (this._error) {
+ return html`${this._error}`;
+ }
return html`