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

2021-09-05 21:33:32 -07:00
parent 199a4b8bce
commit 45fef4676c
1 changed files with 29 additions and 12 deletions
@@ -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"