diff --git a/src/patches/ha-hls-player.ts b/src/patches/ha-hls-player.ts
index a7aae1db..86b2133f 100644
--- a/src/patches/ha-hls-player.ts
+++ b/src/patches/ha-hls-player.ts
@@ -106,6 +106,7 @@ customElements.whenDefined('ha-hls-player').then(() => {
       return html`
         <video
           id="video"
+          .poster=${this.posterUrl}
           ?autoplay=${this.autoPlay}
           .muted=${this.muted}
           ?playsinline=${this.playsInline}
@@ -118,16 +119,7 @@ customElements.whenDefined('ha-hls-player').then(() => {
               );
             }
           }}
-          @loadeddata=${(ev) => {
-            dispatchMediaLoadedEvent(this, ev, {
-              player: this,
-              capabilities: {
-                supportsPause: true,
-                hasAudio: mayHaveAudio(this._video),
-              },
-              technology: ['hls'],
-            });
-          }}
+          @loadeddata=${(ev) => this._loadedDataHandler(ev)}
           @volumechange=${() => dispatchMediaVolumeChangeEvent(this)}
           @play=${() => dispatchMediaPlayEvent(this)}
           @pause=${() => dispatchMediaPauseEvent(this)}
@@ -135,6 +127,18 @@ customElements.whenDefined('ha-hls-player').then(() => {
       `;
     }
 
+    private _loadedDataHandler(ev: Event) {
+      super._loadedData();
+      dispatchMediaLoadedEvent(this, ev, {
+        player: this,
+        capabilities: {
+          supportsPause: true,
+          hasAudio: mayHaveAudio(this._video),
+        },
+        technology: ['hls'],
+      });
+    }
+
     static get styles(): CSSResultGroup {
       return [
         super.styles,