Pārlūkot izejas kodu

修复手机端视频: video标签改为img(MJPEG不支持video标签)

- MJPEG的multipart/x-mixed-replace只能由img标签显示, video标签不支持
- 增加加载失败自动重试(3秒)
- CSS: #videoWrap video -> img
dev 6 dienas atpakaļ
vecāks
revīzija
79a5a8ac48
1 mainītis faili ar 13 papildinājumiem un 5 dzēšanām
  1. 13 5
      web/mobile.html

+ 13 - 5
web/mobile.html

@@ -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}
 #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}
 .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}
@@ -84,7 +84,7 @@ body{font-family:system-ui,sans-serif;background:#0b1220;color:#e8e8e8;height:10
 
   <div id="videoPage">
     <div id="videoWrap">
-      <video id="video" autoplay muted playsinline></video>
+      <img id="video" alt="">
       <div id="videoLoader">加载中...</div>
     </div>
     <div class="chSwitcher" id="chSwitcher"></div>
@@ -180,9 +180,17 @@ function switchChannel(id) {
   const v = document.getElementById('video');
   v.src = '/mjpeg/' + id + '?t=' + Date.now();
   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) {