From 3930f014dfadd0ce76c46922434335f7ed419246 Mon Sep 17 00:00:00 2001
From: tian <11429339@qq.com>
Date: Thu, 7 May 2026 14:59:31 +0800
Subject: [PATCH] feat: use hls.js for HLS playback

---
 internal/web/ui/templates/monitor.html | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/internal/web/ui/templates/monitor.html b/internal/web/ui/templates/monitor.html
index 34d6563..35288d1 100644
--- a/internal/web/ui/templates/monitor.html
+++ b/internal/web/ui/templates/monitor.html
@@ -15,6 +15,7 @@
   <div class="card muted" style="text-align:center;grid-column:1/-1">加载中…</div>
 </div>
 
+<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
 <script>
 function loadAll() {
   var wall = document.getElementById("video-wall");
@@ -47,22 +48,32 @@ function loadAll() {
     var cols = all.length <= 2 ? all.length : 2;
     wall.style.gridTemplateColumns = "repeat(" + cols + ",minmax(0,1fr))";
     var html = "";
-    all.forEach(function(ch) {
+    all.forEach(function(ch, i) {
       html += '<div class="card" style="padding:8px">';
       html += '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">';
       html += '<span style="font-size:12px;font-weight:500">' + esc(ch._dev) + ' · ' + esc(ch.name) + '</span>';
-      if (ch.hls_url) {
-        html += '<a class="btn ghost" href="' + esc(ch.hls_url) + '" target="_blank" style="font-size:11px;padding:2px 8px">新窗口</a>';
-      }
       html += '</div>';
       if (ch.hls_url) {
-        html += '<video controls autoplay muted style="width:100%;max-height:340px;background:#000" src="' + esc(ch.hls_url) + '"></video>';
+        html += '<video id="v' + i + '" controls autoplay muted style="width:100%;max-height:340px;background:#000"></video>';
       } else {
         html += '<div class="muted" style="height:200px;display:flex;align-items:center;justify-content:center">无预览地址</div>';
       }
       html += '</div>';
     });
     wall.innerHTML = html;
+    // Initialize HLS players
+    all.forEach(function(ch, i) {
+      if (!ch.hls_url) return;
+      var video = document.getElementById('v' + i);
+      if (!video) return;
+      if (Hls.isSupported()) {
+        var hls = new Hls();
+        hls.loadSource(ch.hls_url);
+        hls.attachMedia(video);
+      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = ch.hls_url;
+      }
+    });
   });
 }
 function esc(s) { return (s||"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"); }