From 9862d6605387cf2531dd59ad152214a0f8645a12 Mon Sep 17 00:00:00 2001
From: deflax <daniel@deflax.net>
Date: Sun, 8 Sep 2024 01:33:42 +0000
Subject: [PATCH] check for native hls support before using hls.js

---
 src/api/templates/index.html | 63 +++++++++++++++++++-----------------
 1 file changed, 33 insertions(+), 30 deletions(-)

diff --git a/src/api/templates/index.html b/src/api/templates/index.html
index 27132fe..444a321 100644
--- a/src/api/templates/index.html
+++ b/src/api/templates/index.html
@@ -70,7 +70,39 @@ document.addEventListener('DOMContentLoaded', () => {
   // captions.update is required for captions to work with hls.js
   const defaultOptions = {};
 
-  if (Hls.isSupported()) {
+  //
+  // First check for native browser HLS support
+  //
+  if (video.canPlayType('application/vnd.apple.mpegurl')) {
+    async function fetchInitData() {
+      try {
+        // Fetch data from the API
+        const response = await fetch(playhead_url);
+
+        // Check if the response is successful (status code 200)
+        if (!response.ok) {
+          throw new Error(`Video: HTTP error! Status: ${response.status}`);
+        }
+
+        // Parse JSON from the response
+        const data = await response.json();
+
+        // Now 'data' contains the parsed JSON
+        //console.log("Fetched JSON data:", data);
+
+        video.src = data.head;
+        console.log('Video: switching to ', data.head)
+
+        const player = new Plyr(video, defaultOptions);
+      } catch (error) {
+        console.error("Video: Error fetching data:", error);
+      }
+    }
+    fetchInitData();
+    //
+    // If no native HLS support, check if HLS.js is supported
+    //
+  } else if (Hls.isSupported()) {
     const hls = new Hls();
 
     // Function to fetch and process JSON from the API
@@ -157,35 +189,6 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     window.hls = hls;
-
-  } else {
-    // Hls.js is not supported, fallback to standard video element
-    // Function to fetch and process JSON from the API
-    async function fetchInitData() {
-      try {
-        // Fetch data from the API
-        const response = await fetch(playhead_url);
-
-        // Check if the response is successful (status code 200)
-        if (!response.ok) {
-          throw new Error(`Video: HTTP error! Status: ${response.status}`);
-        }
-
-        // Parse JSON from the response
-        const data = await response.json();
-
-        // Now 'data' contains the parsed JSON
-        //console.log("Fetched JSON data:", data);
-
-        video.src = data.head;
-        console.log('Video: switching to ', data.head)
-
-        const player = new Plyr(video, defaultOptions);
-      } catch (error) {
-        console.error("Video: Error fetching data:", error);
-      }
-    }
-    fetchInitData();
   }
 
   function updateQuality(newQuality) {