|
@@ -30,7 +30,7 @@ body{font-family:system-ui,sans-serif;background:#0b1220;color:#e8e8e8;height:10
|
|
|
/* 视频页 */
|
|
/* 视频页 */
|
|
|
#videoPage{flex:1;display:flex;flex-direction:column;overflow:hidden}
|
|
#videoPage{flex:1;display:flex;flex-direction:column;overflow:hidden}
|
|
|
#videoWrap{flex:1;position:relative;background:#000;min-height:0}
|
|
#videoWrap{flex:1;position:relative;background:#000;min-height:0}
|
|
|
-#videoWrap video{width:100%;height:100%;object-fit:contain}
|
|
|
|
|
|
|
+#videoWrap img{width:100%;height:100%;object-fit:contain;display:block}
|
|
|
#videoLoader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#888}
|
|
#videoLoader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#888}
|
|
|
.chSwitcher{display:flex;overflow-x:auto;padding:8px;background:#0e1426;border-top:1px solid #0f3460;flex-shrink:0}
|
|
.chSwitcher{display:flex;overflow-x:auto;padding:8px;background:#0e1426;border-top:1px solid #0f3460;flex-shrink:0}
|
|
|
.chSwitcher button{padding:8px 14px;margin-right:8px;background:#0f3460;border:none;color:#eee;border-radius:4px;font-size:13px;white-space:nowrap;cursor:pointer}
|
|
.chSwitcher button{padding:8px 14px;margin-right:8px;background:#0f3460;border:none;color:#eee;border-radius:4px;font-size:13px;white-space:nowrap;cursor:pointer}
|
|
@@ -84,7 +84,7 @@ body{font-family:system-ui,sans-serif;background:#0b1220;color:#e8e8e8;height:10
|
|
|
|
|
|
|
|
<div id="videoPage">
|
|
<div id="videoPage">
|
|
|
<div id="videoWrap">
|
|
<div id="videoWrap">
|
|
|
- <video id="video" autoplay muted playsinline></video>
|
|
|
|
|
|
|
+ <img id="video" alt="">
|
|
|
<div id="videoLoader">加载中...</div>
|
|
<div id="videoLoader">加载中...</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="chSwitcher" id="chSwitcher"></div>
|
|
<div class="chSwitcher" id="chSwitcher"></div>
|
|
@@ -180,9 +180,17 @@ function switchChannel(id) {
|
|
|
const v = document.getElementById('video');
|
|
const v = document.getElementById('video');
|
|
|
v.src = '/mjpeg/' + id + '?t=' + Date.now();
|
|
v.src = '/mjpeg/' + id + '?t=' + Date.now();
|
|
|
document.getElementById('videoLoader').style.display = 'block';
|
|
document.getElementById('videoLoader').style.display = 'block';
|
|
|
- v.onloadstart = () => {};
|
|
|
|
|
- v.onplaying = () => document.getElementById('videoLoader').style.display = 'none';
|
|
|
|
|
- v.onerror = () => { document.getElementById('videoLoader').textContent = '视频加载失败'; };
|
|
|
|
|
|
|
+ v.onload = () => { document.getElementById('videoLoader').style.display = 'none'; };
|
|
|
|
|
+ v.onerror = () => {
|
|
|
|
|
+ document.getElementById('videoLoader').textContent = '视频加载失败';
|
|
|
|
|
+ // 3秒后自动重试
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ if (curChannel === id) {
|
|
|
|
|
+ document.getElementById('videoLoader').textContent = '重试中...';
|
|
|
|
|
+ v.src = '/mjpeg/' + id + '?t=' + Date.now();
|
|
|
|
|
+ }
|
|
|
|
|
+ }, 3000);
|
|
|
|
|
+ };
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function switchTab(tab) {
|
|
function switchTab(tab) {
|