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

feat: use hls.js for HLS playback

Browse Source
This commit is contained in:
tian 2026-05-07 14:59:31 +08:00
parent cbc5f90b84
commit 3930f014df
1 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;"); }