From 531581eb04b97d017bdf8d426911391edc10ad4c Mon Sep 17 00:00:00 2001
From: tian <11429339@qq.com>
Date: Thu, 7 May 2026 14:41:22 +0800
Subject: [PATCH] fix: use iframe hls_player for video wall

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

diff --git a/internal/web/ui/templates/monitor.html b/internal/web/ui/templates/monitor.html
index f98a08f..07caa3a 100644
--- a/internal/web/ui/templates/monitor.html
+++ b/internal/web/ui/templates/monitor.html
@@ -22,7 +22,7 @@ function loadAll() {
 
   var devices = [
     {{range .Devices}}{{if .Online}}
-    {id:"{{.DeviceID}}",name:"{{.DisplayName}}"},
+    {id:"{{.DeviceID}}",name:"{{.DisplayName}}",ip:"{{.IP}}",media:"{{.MediaPort}}"},
     {{end}}{{end}}
   ];
   if (devices.length === 0) {
@@ -36,7 +36,7 @@ function loadAll() {
       .then(function(data) {
         var chs = data.channels || [];
         return chs.map(function(ch) {
-          return {device:dev.name, channel:ch.name, url:ch.hls_url};
+          return {device:dev.name, channel:ch.name, ip:dev.ip, media:dev.media};
         });
       })
       .catch(function() { return []; });
@@ -49,17 +49,14 @@ function loadAll() {
       wall.innerHTML = '<div class="card muted" style="text-align:center;grid-column:1/-1">没有可预览的通道</div>';
       return;
     }
-    var cols = all.length === 1 ? 1 : 2;
+    var cols = all.length <= 2 ? all.length : 2;
     wall.style.gridTemplateColumns = "repeat(" + cols + ",minmax(0,1fr))";
     var html = "";
     all.forEach(function(item) {
       html += '<div class="card" style="padding:8px">';
       html += '<div style="font-size:12px;font-weight:500;margin-bottom:6px">' + esc(item.device) + ' · ' + esc(item.channel) + '</div>';
-      if (item.url) {
-        html += '<video controls autoplay muted style="width:100%;max-height:360px;background:#000" src="' + esc(item.url) + '"></video>';
-      } else {
-        html += '<div class="muted">无预览地址</div>';
-      }
+      var player = 'http://' + item.ip + ':' + item.media + '/hls_player.html';
+      html += '<iframe src="' + esc(player) + '" style="width:100%;height:420px;border:none;background:#000" allowfullscreen></iframe>';
       html += '</div>';
     });
     wall.innerHTML = html;