check for native hls support before using hls.js

src/api/api.py

@@ -25,7 +25,7 @@ logger_job.setLevel(log_level)
 logger_content = logging.getLogger('content')
 
 # Variables
-scheduler_hostname = os.environ.get('SCHEDULER_API_HOSTNAME', 'tv.example.com')
+scheduler_hostname = os.environ.get('SCHEDULER_API_HOSTNAME', 'api.example.com')
 core_sync_period = int(os.environ.get('CORE_SYNC_PERIOD', 15))
 api_hostname = os.environ.get('CORE_API_HOSTNAME', 'stream.example.com')
 api_username = os.environ.get('CORE_API_AUTH_USERNAME', 'admin')

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
@@ -81,35 +113,34 @@ document.addEventListener('DOMContentLoaded', () => {
 
         // Check if the response is successful (status code 200)
         if (!response.ok) {
-          throw new Error(`HTTP error! Status: ${response.status}`);
+          throw new Error(`HLS.js: 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);
+        // console.log("Fetched JSON data:", data);
 
         const oldsrc = hls.url;
         const newsrc = data.head;
 
         if (newsrc === oldsrc) {
-          //console.log(oldsrc);
+          console.log('HLS.js: playing from ' newsrc);
-          //console.log(newsrc);
         } else {
-          console.log('playhead: switching to ' + newsrc)
+          console.log('HLS.js: switching to ' + newsrc)
           hls.loadSource(newsrc);
           video.load();  // Reload the video element to apply the new source
           video.play().catch(error => {
-            console.error('Autoplay was prevented:', error);
+            console.error('HLS.js: Autoplay was prevented:', error);
           });
         }
       } catch (error) {
-        console.error("Error fetching data:", error);
+        console.error("HLS.js: Error fetching data:", error);
       }
     }
-
     fetchData();
+
     // Set the interval for periodic execution (e.g., every 5 seconds)
     const interval = 4200; // in milliseconds
     setInterval(fetchData, interval);
@@ -122,7 +153,7 @@ document.addEventListener('DOMContentLoaded', () => {
     // all available video qualities. This is important; in this approach,
     // we will have one source on the Plyr player.
     hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
-      console.log('hls: manifest parsed');
+      console.log('HLS.js: manifest parsed');
 
       // Transform available levels into an array of integers (height values).
       const availableQualities = hls.levels.map((l) => l.height)
@@ -144,7 +175,7 @@ document.addEventListener('DOMContentLoaded', () => {
       }
 
       hls.on(Hls.Events.LEVEL_SWITCHED, function (event, data) {
-        console.log('hls: level switched');
+        console.log('HLS.js: level switched');
         var span = document.querySelector(".plyr__menu__container [data-plyr='quality'][value='0'] span")
         if (hls.autoLevelEnabled) {
           span.innerHTML = `AUTO (${hls.levels[data.level].height}p)`
@@ -158,33 +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(`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;
-        const player = new Plyr(video, defaultOptions);
-      } catch (error) {
-        console.error("Error fetching data:", error);
-      }
-    }
-    fetchInitData();
   }
 
   function updateQuality(newQuality) {
@@ -193,7 +197,7 @@ document.addEventListener('DOMContentLoaded', () => {
     } else {
       window.hls.levels.forEach((level, levelIndex) => {
         if (level.height === newQuality) {
-          console.log("hls: Found quality match with " + newQuality);
+          console.log("HLS.js: Found quality match with " + newQuality);
           window.hls.currentLevel = levelIndex;
         }
       });

src/discordbot/discordbot.py

@@ -11,7 +11,7 @@ import logging
 bot_token = os.environ.get('DISCORDBOT_TOKEN', 'token')
 live_channel_id = os.environ.get('DISCORDBOT_LIVE_CHANNEL_ID', 0)
 live_channel_update = os.environ.get('DISCORDBOT_LIVE_CHANNEL_UPDATE', 1440)
-scheduler_hostname = os.environ.get('SCHEDULER_API_HOSTNAME', 'tv.example.com')
+scheduler_hostname = os.environ.get('SCHEDULER_API_HOSTNAME', 'api.example.com')
 
 # Discord API Intents
 intents = discord.Intents.all()

variables.env.dist

@@ -5,7 +5,7 @@ CORE_API_HOSTNAME=stream.example.com
 CORE_API_AUTH_USERNAME=admin
 CORE_API_AUTH_PASSWORD=changeme
 SCHEDULER_LOG_LEVEL=warn
-SCHEDULER_API_HOSTNAME=tv.example.com
+SCHEDULER_API_HOSTNAME=api.example.com
 DISCORDBOT_TOKEN=changeme
 DISCORDBOT_LIVE_CHANNEL_ID=0
 DISCORDBOT_LIVE_CHANNEL_UPDATE=1440