fix: use iframe hls_player for video wall
This commit is contained in:
parent
35726388ab
commit
531581eb04
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user