fix: Fix certain webrtc streams that were not loading correctly (#1766)

src/patches/ha-web-rtc-player.ts

@@ -12,6 +12,7 @@
 import { css, CSSResultGroup, html, TemplateResult, unsafeCSS } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { query } from 'lit/decorators/query.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { dispatchLiveErrorEvent } from '../components-lib/live/utils/dispatch-live-error.js';
 import { renderMessage } from '../components/message.js';
 import liveHAComponentsStyle from '../scss/live-ha-components.scss';
@@ -111,6 +112,7 @@ customElements.whenDefined('ha-web-rtc-player').then(() => {
           .muted=${this.muted}
           ?playsinline=${this.playsInline}
           ?controls=${this.controls}
+          poster=${ifDefined(this.posterUrl)}
           @loadedmetadata=${() => {
             if (this.controls) {
               hideMediaControlsTemporarily(
@@ -119,7 +121,16 @@ customElements.whenDefined('ha-web-rtc-player').then(() => {
               );
             }
           }}
-          @loadeddata=${(ev) => {
+          @loadeddata=${(ev) => this._loadedDataHandler(ev)}
+          @volumechange=${() => dispatchMediaVolumeChangeEvent(this)}
+          @play=${() => dispatchMediaPlayEvent(this)}
+          @pause=${() => dispatchMediaPauseEvent(this)}
+        ></video>
+      `;
+    }
+
+    private _loadedDataHandler(ev: Event) {
+      super._loadedData();
       dispatchMediaLoadedEvent(this, ev, {
         player: this,
         capabilities: {
@@ -128,12 +139,6 @@ customElements.whenDefined('ha-web-rtc-player').then(() => {
         },
         technology: ['webrtc'],
       });
-          }}
-          @volumechange=${() => dispatchMediaVolumeChangeEvent(this)}
-          @play=${() => dispatchMediaPlayEvent(this)}
-          @pause=${() => dispatchMediaPauseEvent(this)}
-        ></video>
-      `;
     }
 
     static get styles(): CSSResultGroup {