Doni/3588AdminBackend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use iframe hls_player for video wall

Browse Source
This commit is contained in:
tian 2026-05-07 14:41:22 +08:00
parent 35726388ab
commit 531581eb04
1 changed files with 5 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
internal/web/ui/templates/monitor.html
View File

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