Use HLS player instead of video element for clips.

src/frigate-hass-card.ts

@@ -45,7 +45,8 @@ import dayjs from 'dayjs';
 import dayjs_utc from 'dayjs/plugin/utc';
 import dayjs_timezone from 'dayjs/plugin/timezone';
 
-const URL_TROUBLESHOOTING = "https://github.com/dermotduffy/frigate-hass-card#troubleshooting";
+const URL_TROUBLESHOOTING =
+  'https://github.com/dermotduffy/frigate-hass-card#troubleshooting';
 
 // Load dayjs plugins.
 dayjs.extend(dayjs_timezone);
@@ -431,8 +432,7 @@ export class FrigateCard extends LitElement {
   ): TemplateResult {
     return html` <div class="frigate-card-attention">
       <span>
-        <ha-icon icon="${icon}">
+        <ha-icon icon="${icon}"> </ha-icon>
-        </ha-icon>
         ${message ? html`&nbsp;${message}` : ''}
       </span>
     </div>`;
@@ -442,7 +442,8 @@ export class FrigateCard extends LitElement {
   protected _renderError(error: string): TemplateResult {
     return this._renderAttentionIcon(
       'mdi:alert-circle',
-      html`${error}. See <a href="${URL_TROUBLESHOOTING}">troubleshooting</a></span>.`);
+      html`${error}. See <a href="${URL_TROUBLESHOOTING}">troubleshooting</a></span>.`,
+    );
   }
 
   // Generate a human-readable title from an event.
@@ -606,7 +607,7 @@ export class FrigateCard extends LitElement {
     if (!event.has_clip) {
       return null;
     }
-    return `${this.config.frigate_url}/vod/event/${event.id}/index.m3u8`
+    return `${this.config.frigate_url}/vod/event/${event.id}/index.m3u8`;
   }
 
   protected _getSnapshotURLFromEvent(event: FrigateEvent): string | null {
@@ -654,24 +655,49 @@ export class FrigateCard extends LitElement {
     this._eventBeingShown = event;
 
     return html`
-      <video
+      <ha-hls-player
+        .hass=${this._hass}
+        .url=${clipURL}
         class="frigate-card-viewer"
         muted
         controls
         playsinline
-        @play=${() => {
+        allow-exoplayer
-          this._clipPlaying = true;
-        }}
-        @pause=${() => {
-          this._clipPlaying = false;
-        }}
         ?autoplay="${autoplay}"
       >
-        <source src="${clipURL}" type="application/x-mpegURL" />
+      </ha-hls-player>
-      </video>
     `;
   }
 
+  public updated(): void {
+    this.updateComplete.then(() => {
+      // DOM elements are not always present until after updateComplete promise
+      // is resolved. Note that children of children (i.e. the underlying video
+      // element) is not always present even when the promise returns, so
+      // capture the event at the upper shadow root instead.
+      const hls_player = this.renderRoot
+        ?.querySelector('ha-card')
+        ?.querySelector('ha-hls-player');
+
+      if (hls_player) {
+        hls_player.shadowRoot?.addEventListener(
+          'play',
+          () => {
+            this._clipPlaying = true;
+          },
+          true,
+        );
+        hls_player.shadowRoot?.addEventListener(
+          'pause',
+          () => {
+            this._clipPlaying = true;
+          },
+          true,
+        );
+      }
+    });
+  }
+
   // Render a snapshot.
   protected async _renderSnapshotViewer(): Promise<TemplateResult> {
     let event: FrigateEvent, events: FrigateGetEventsResponse;