diff --git a/internal/web/ui/templates/monitor.html b/internal/web/ui/templates/monitor.html
index 07caa3a..34d6563 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}}",ip:"{{.IP}}",media:"{{.MediaPort}}"},
+    {id:"{{.DeviceID}}",name:"{{.DisplayName}}"},
     {{end}}{{end}}
   ];
   if (devices.length === 0) {
@@ -33,12 +33,7 @@ function loadAll() {
   var promises = devices.map(function(dev) {
     return fetch('/ui/api/monitor/channels?device_id=' + encodeURIComponent(dev.id))
       .then(function(r) { return r.json(); })
-      .then(function(data) {
-        var chs = data.channels || [];
-        return chs.map(function(ch) {
-          return {device:dev.name, channel:ch.name, ip:dev.ip, media:dev.media};
-        });
-      })
+      .then(function(data) { return (data.channels||[]).map(function(ch) { ch._dev = dev.name; return ch; }); })
       .catch(function() { return []; });
   });
 
@@ -52,11 +47,19 @@ function loadAll() {
     var cols = all.length <= 2 ? all.length : 2;
     wall.style.gridTemplateColumns = "repeat(" + cols + ",minmax(0,1fr))";
     var html = "";
-    all.forEach(function(item) {
+    all.forEach(function(ch) {
       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>';
-      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 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>';
+      } else {
+        html += '<div class="muted" style="height:200px;display:flex;align-items:center;justify-content:center">无预览地址</div>';
+      }
       html += '</div>';
     });
     wall.innerHTML = html;