Use a classic video tag if it's not HLS.

src/frigate-hass-card.ts

@@ -783,18 +783,35 @@ export class FrigateCard extends LitElement {
           />`
         : ``}
       ${this._view.is('clip')
-        ? html`<ha-hls-player
+        ? resolvedMedia?.mime_type.toLowerCase() == 'application/x-mpegurl'
-            .hass=${this._hass}
+          ? html`<ha-hls-player
-            .url=${resolvedMedia.url}
+              .hass=${this._hass}
-            class="frigate-card-viewer"
+              .url=${resolvedMedia.url}
-            title="${mediaToRender.title}"
+              class="frigate-card-viewer"
-            muted
+              title="${mediaToRender.title}"
-            controls
+              muted
-            playsinline
+              controls
-            allow-exoplayer
+              playsinline
-            ?autoplay="${autoplay}"
+              allow-exoplayer
-          >
+              ?autoplay="${autoplay}"
-          </ha-hls-player>`
+            >
+            </ha-hls-player>`
+          : html`<video
+              class="frigate-card-viewer"
+              title="${mediaToRender.title}"
+              muted
+              controls
+              playsinline
+              @play=${() => {
+                this._clipPlaying = true;
+              }}
+              @pause=${() => {
+                this._clipPlaying = false;
+              }}
+              ?autoplay="${autoplay}"
+            >
+              <source src="${resolvedMedia.url}" type="${resolvedMedia.mime_type}" />
+            </video>`
         : html`<img
             src=${resolvedMedia.url}
             class="frigate-card-viewer"