From 45fef4676c9cd46b7c64bef2a0756a0bfa429030 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sun, 5 Sep 2021 21:33:32 -0700
Subject: [PATCH] Use a classic video tag if it's not HLS.

---
 src/frigate-hass-card.ts | 41 ++++++++++++++++++++++++++++------------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/frigate-hass-card.ts b/src/frigate-hass-card.ts
index 69c498bc..6bb6adc9 100644
--- a/src/frigate-hass-card.ts
+++ b/src/frigate-hass-card.ts
@@ -783,18 +783,35 @@ export class FrigateCard extends LitElement {
           />`
         : ``}
       ${this._view.is('clip')
-        ? html`<ha-hls-player
-            .hass=${this._hass}
-            .url=${resolvedMedia.url}
-            class="frigate-card-viewer"
-            title="${mediaToRender.title}"
-            muted
-            controls
-            playsinline
-            allow-exoplayer
-            ?autoplay="${autoplay}"
-          >
-          </ha-hls-player>`
+        ? resolvedMedia?.mime_type.toLowerCase() == 'application/x-mpegurl'
+          ? html`<ha-hls-player
+              .hass=${this._hass}
+              .url=${resolvedMedia.url}
+              class="frigate-card-viewer"
+              title="${mediaToRender.title}"
+              muted
+              controls
+              playsinline
+              allow-exoplayer
+              ?autoplay="${autoplay}"
+            >
+            </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"