fix():修复播放器组件轮播和全部关闭销毁播放器冲突问题

王鑫
1 parent 3252e971
Showing 2 changed files with 340 additions and 334 deletions
web_src/src/components/DeviceList1078.vue
web_src/src/components/common/EasyPlayer.vue
@@ -148,6 +148,7 @@ export default {
     // --- 侧边栏折叠逻辑 ---
     updateSidebarState() {
       this.sidebarState = !this.sidebarState;
+      // 触发 resize 事件让播放器自适应
       setTimeout(() => {
         const event = new Event('resize');
         window.dispatchEvent(event);
@@ -180,37 +181,39 @@ export default {
     },
     // ==========================================
-    // 【核心修复】1. 左键点击播放逻辑
+    // 1. 左键点击播放逻辑
     // ==========================================
     nodeClick(data, node) {
       if (this.isCarouselRunning) {
         this.$message.warning("请先停止轮播再手动播放");
         return;
       }
-      // 判断是否为叶子节点（通道），没有子节点视为通道
+      // 判断是否为叶子节点（通道）
       if (!data.children || data.children.length === 0) {
         this.playSingleChannel(data);
       }
     },
-    // 单路播放 API 请求
     playSingleChannel(data) {
-      // 假设 data.code 格式为 "deviceId_sim_channel"
-      // 根据您的接口调整这里的解析逻辑
+      // data.code 格式假设为 "deviceId_sim_channel"
       let stream = data.code.replace('-', '_'); // 容错处理
       let arr = stream.split("_");
-      // 假设 ID 结构是: id_sim_channel，取后两段
-      if(arr.length < 3) return;
+      // 容错: 确保能解析出 sim 和 channel
+      if (arr.length < 3) {
+        console.warn("Invalid channel code:", data.code);
+        return;
+      }
       this.$axios.get(`/api/jt1078/query/send/request/io/${arr[1]}/${arr[2]}`).then(res => {
-        if(res.data.code === 0 || res.data.code === 200) {
-          const url = res.data.data.ws_flv; // 或者 wss_flv
+        if (res.data.code === 0 || res.data.code === 200) {
+          // 兼容 http/https 协议
+          const url = (location.protocol === "https:") ? res.data.data.wss_flv : res.data.data.ws_flv;
           const idx = this.windowClickIndex - 1;
-          // 更新播放地址和信息
+          // 使用 $set 确保数组响应式更新
           this.$set(this.videoUrl, idx, url);
-          this.$set(this.videoDataList, idx, { ...data, videoUrl: url });
+          this.$set(this.videoDataList, idx, {...data, videoUrl: url});
           // 自动跳到下一个窗口
           const maxWindow = parseInt(this.windowNum) || 4;
@@ -224,18 +227,15 @@ export default {
     },
     // ==========================================
-    // 【核心修复】2. 右键菜单逻辑
+    // 2. 右键菜单逻辑
     // ==========================================
     nodeContextmenu(event, data, node) {
-      // 只有设备节点(有子级)才显示菜单，通道节点不显示
+      // 只有父设备节点(有子级)才显示菜单
       if (data.children && data.children.length > 0) {
         this.rightClickNode = node;
         this.contextMenuVisible = true;
         this.contextMenuLeft = event.clientX;
         this.contextMenuTop = event.clientY;
-
-        // 阻止默认浏览器右键菜单
-        // 注意：VehicleList 组件内部也需要处理 @contextmenu.prevent
       }
     },
@@ -243,7 +243,6 @@ export default {
       this.contextMenuVisible = false;
     },
-    // 处理右键菜单命令（一键播放该设备）
     handleContextCommand(command) {
       this.hideContextMenu();
       if (command === 'playback') {
@@ -262,21 +261,20 @@ export default {
           else this.windowNum = '4';
           // 3. 构造批量请求参数
-          // 假设后端接受的格式处理
           const ids = channels.map(c => {
-            // 假设 code 是 id_sim_channel
+            // 假设 code 是 id_sim_channel，后端需要 sim-channel
             const parts = c.code.replaceAll('_', '-').split('-');
-            // 取 sim-channel 部分
             return parts.slice(1).join('-');
           });
           this.$axios.post('/api/jt1078/query/beachSend/request/io', ids).then(res => {
-            if(res.data && res.data.data) {
+            if (res.data && res.data.data) {
               const list = res.data.data || [];
               list.forEach((item, i) => {
                 if (channels[i]) {
-                  this.$set(this.videoUrl, i, item.ws_flv);
-                  this.$set(this.videoDataList, i, { ...channels[i], videoUrl: item.ws_flv });
+                  const url = (location.protocol === "https:") ? item.wss_flv : item.ws_flv;
+                  this.$set(this.videoUrl, i, url);
+                  this.$set(this.videoDataList, i, {...channels[i], videoUrl: url});
                 }
               });
             } else {
@@ -297,10 +295,12 @@ export default {
     async checkCarouselPermission(actionName) {
       if (!this.isCarouselRunning) return true;
       try {
-        await this.$confirm(`正在轮播，"${actionName}"将停止轮播，是否继续？`,'提示',{ type: 'warning' });
+        await this.$confirm(`正在轮播，"${actionName}"将停止轮播，是否继续？`, '提示', {type: 'warning'});
         this.stopCarousel();
         return true;
-      } catch (e) { return false; }
+      } catch (e) {
+        return false;
+      }
     },
     async closeAllVideo() {
@@ -313,16 +313,17 @@ export default {
       if (!(await this.checkCarouselPermission('关闭当前窗口'))) return;
       const idx = Number(this.windowClickIndex) - 1;
       if (this.videoUrl && this.videoUrl[idx]) {
-        this.$confirm(`确认关闭窗口 [${this.windowClickIndex}] ？`, '提示', { type: 'warning' })
+        this.$confirm(`确认关闭窗口 [${this.windowClickIndex}] ？`, '提示', {type: 'warning'})
           .then(() => {
             this.$set(this.videoUrl, idx, null);
             this.$set(this.videoDataList, idx, null);
-          }).catch(()=>{});
+          }).catch(() => {
+        });
       }
     },
     // ==========================================
-    // 4. 轮播逻辑 (保持之前定义的逻辑)
+    // 4. 轮播逻辑 (补全部分)
     // ==========================================
     openCarouselConfig() {
       if (this.isCarouselRunning) {
@@ -334,25 +335,182 @@ export default {
     stopCarousel() {
       this.isCarouselRunning = false;
-      if (this.carouselTimer) clearTimeout(this.carouselTimer);
+      if (this.carouselTimer) {
+        clearTimeout(this.carouselTimer);
+        this.carouselTimer = null;
+      }
+      this.$message.info("轮播已停止");
     },
     async startCarousel(config) {
       this.carouselConfig = config;
+
+      // 1. 筛选目标设备
       let targetNodes = [];
+      if (config.sourceType === 'all_online') {
+        const collectOnline = (nodes) => {
+          nodes.forEach(node => {
+            if (node.abnormalStatus === 1) targetNodes.push(node);
+            if (node.children && node.children.length > 0) collectOnline(node.children);
+          });
+        };
+        collectOnline(this.deviceTreeData);
+      } else {
+        targetNodes = config.selectedNodes.filter(n => n.abnormalStatus === 1);
+      }
+
+      if (targetNodes.length === 0) {
+        this.$message.warning("当前范围内没有在线设备可供轮播");
+        return;
+      }
-      // ... (保留您之前的 startCarousel 完整逻辑，这里简略以节省篇幅，请确保您之前的代码已粘贴进来) ...
-      // 如果没有之前的代码，请告诉我，我再发一遍完整的 startCarousel
-      // 这里简单模拟一个启动
+      // 2. 初始化状态
+      this.carouselDeviceList = targetNodes;
+      this.channelBuffer = [];
+      this.deviceCursor = 0;
       this.isCarouselRunning = true;
-      this.$message.success("轮播已启动 (需要补全 startCarousel 完整逻辑)");
+      this.isWithinSchedule = true;
+
+      this.$message.success(`轮播已启动，共 ${targetNodes.length} 台在线设备`);
+
+      // 3. 立即执行第一轮
+      await this.executeFirstRound();
+    },
+
+    async executeFirstRound() {
+      if (this.windowNum !== this.carouselConfig.layout) {
+        this.windowNum = this.carouselConfig.layout;
+      }
+
+      const batch = await this.fetchNextBatchData();
+      if (batch) {
+        this.applyVideoBatch(batch);
+        this.runCarouselLoop();
+      } else {
+        this.$message.error("首轮加载失败，尝试重试...");
+        this.runCarouselLoop();
+      }
+    },
+
+    runCarouselLoop() {
+      if (!this.isCarouselRunning) return;
+
+      const {runMode, timeRange, interval} = this.carouselConfig;
+
+      // 1. 检查定时
+      if (runMode === 'schedule') {
+        if (!this.checkTimeRange(timeRange[0], timeRange[1])) {
+          this.isWithinSchedule = false;
+          if (this.videoUrl.some(v => v)) this.closeAllVideoNoConfirm();
+          this.carouselTimer = setTimeout(() => this.runCarouselLoop(), 10000);
+          return;
+        }
+        this.isWithinSchedule = true;
+      }
+
+      // 2. 计算时间轴
+      const PRELOAD_TIME = 15;
+      const intervalSec = Math.max(interval, 30);
+      const waitTime = (intervalSec - PRELOAD_TIME) * 1000;
+
+      // 3. 计时循环
+      this.carouselTimer = setTimeout(async () => {
+        if (!this.isCarouselRunning) return;
+
+        const nextBatch = await this.fetchNextBatchData();
+
+        this.carouselTimer = setTimeout(() => {
+          if (!this.isCarouselRunning) return;
+          if (nextBatch) this.applyVideoBatch(nextBatch);
+          this.runCarouselLoop();
+        }, PRELOAD_TIME * 1000);
+
+      }, waitTime);
+    },
+
+    applyVideoBatch({urls, infos}) {
+      this.videoUrl = new Array(parseInt(this.windowNum)).fill(null);
+      setTimeout(() => {
+        urls.forEach((url, index) => {
+          setTimeout(() => {
+            this.$set(this.videoUrl, index, url);
+            this.$set(this.videoDataList, index, infos[index]);
+          }, index * 100);
+        });
+      }, 200);
+    },
+
+    async fetchNextBatchData() {
+      let pageSize = parseInt(this.windowNum) || 4;
+      if (isNaN(pageSize)) pageSize = 4;
+
+      // 填充缓冲区
+      let safetyCounter = 0;
+      while (this.channelBuffer.length < pageSize && safetyCounter < 100) {
+        safetyCounter++;
+        if (this.deviceCursor >= this.carouselDeviceList.length) {
+          this.deviceCursor = 0;
+        }
+
+        const device = this.carouselDeviceList[this.deviceCursor];
+        if (device && device.children && device.children.length > 0) {
+          const codes = device.children
+            .filter(child => !child.disabled)
+            .map(child => child.code);
+          this.channelBuffer.push(...codes);
+        }
+        this.deviceCursor++;
+      }
+
+      if (this.channelBuffer.length === 0) return null;
+
+      const currentCodes = this.channelBuffer.splice(0, pageSize);
+      const streamParams = currentCodes.map(c => c.replaceAll('_', '-').split('-').slice(1).join('-'));
+
+      try {
+        const res = await this.$axios.post('/api/jt1078/query/beachSend/request/io', streamParams, {timeout: 20000});
+        if (res.data && res.data.data) {
+          const resultList = res.data.data;
+          const urls = new Array(pageSize).fill('');
+          const infos = new Array(pageSize).fill(null);
+
+          resultList.forEach((item, i) => {
+            if (i < currentCodes.length) {
+              const url = (location.protocol === "https:") ? item.wss_flv : item.ws_flv;
+              urls[i] = url;
+              infos[i] = {
+                code: currentCodes[i],
+                name: `通道 ${i + 1}`,
+                videoUrl: url
+              };
+            }
+          });
+          return {urls, infos};
+        }
+      } catch (e) {
+        console.error("批量请求流地址失败", e);
+      }
+      return null;
     },
-    // ... 其他轮播辅助函数 (fetchNextBatchData, applyVideoBatch 等) ...
-    // 请确保这些函数存在，否则轮播会报错
-    fetchNextBatchData() {},
-    runCarouselLoop() {},
-    applyVideoBatch() {},
+    checkTimeRange(startStr, endStr) {
+      if (!startStr || !endStr) return true;
+      const now = new Date();
+      const current = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
+      const parse = (str) => {
+        const [h, m, s] = str.split(':').map(Number);
+        return h * 3600 + m * 60 + s;
+      };
+      const start = parse(startStr);
+      const end = parse(endStr);
+      if (end < start) return current >= start || current <= end;
+      return current >= start && current <= end;
+    },
+
+    closeAllVideoNoConfirm() {
+      this.videoUrl = new Array(parseInt(this.windowNum)).fill(null);
+      this.videoDataList = new Array(parseInt(this.windowNum)).fill(null);
+    },
     handleBeforeUnload(e) {
       if (this.isCarouselRunning) {
@@ -419,7 +577,10 @@ export default {
   cursor: pointer;
   color: #606266;
 }
-.fold-btn:hover { color: #409EFF; }
+
+.fold-btn:hover {
+  color: #409EFF;
+}
 .header-right-info {
   margin-left: auto;
@@ -442,19 +603,24 @@ export default {
   position: fixed;
   background: #fff;
   border: 1px solid #EBEEF5;
-  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
   z-index: 3000;
   border-radius: 4px;
   padding: 5px 0;
   min-width: 120px;
 }
+
 .menu-item {
   padding: 8px 15px;
   font-size: 14px;
   color: #606266;
   cursor: pointer;
 }
-.menu-item:hover { background: #ecf5ff; color: #409EFF; }
+
+.menu-item:hover {
+  background: #ecf5ff;
+  color: #409EFF;
+}
 .carousel-status {
   margin-left: 15px;
@@ -17,9 +17,9 @@
       </div>
     </div>
-    <div :id="uniqueId" ref="container" class="player-box"></div>
+    <div :id="uniqueId" :key="uniqueId" ref="container" class="player-box"></div>
-    <div v-if="!hasUrl" class="idle-mask">
+    <div v-show="!hasUrl" class="idle-mask">
       <div class="idle-text">无信号</div>
     </div>
@@ -53,6 +53,7 @@ export default {
   },
   data() {
     return {
+      // 初始 ID
       uniqueId: `player-box-${Date.now()}-${Math.floor(Math.random() * 1000)}`,
       playerInstance: null,
@@ -68,19 +69,17 @@ export default {
       controlTimer: null,
       retryCount: 0,
-      // 【配置区域】在这里修改 true/false 即可生效
       controlsConfig: {
-        showBottomBar: true,    // 是否显示底栏
-        showSpeed: false,       // 【关键】设为 false 隐藏底部网速
-        showCodeSelect: false,  // 【关键】设为 false 隐藏解码选择
-
-        showPlay: true,         // 播放暂停按钮
-        showAudio: true,        // 音量按钮
-        showStretch: true,      // 拉伸按钮
-        showScreenshot: true,   // 截图按钮
-        showRecord: true,       // 录制按钮
-        showZoom: true,         // 电子放大
-        showFullscreen: true,   // 全屏按钮
+        showBottomBar: true,
+        showSpeed: false,
+        showCodeSelect: false,
+        showPlay: true,
+        showAudio: true,
+        showStretch: true,
+        showScreenshot: true,
+        showRecord: true,
+        showZoom: true,
+        showFullscreen: true,
       }
     };
   },
@@ -91,14 +90,12 @@ export default {
       if (typeof url === 'string') return url.length > 0;
       return !!url.videoUrl;
     },
-    // 生成控制 CSS 类名
     playerClassOptions() {
       const c = this.controlsConfig;
       return {
         'hide-bottom-bar': !c.showBottomBar,
-        'hide-speed': !c.showSpeed,            // 对应下方 CSS
-        'hide-code-select': !c.showCodeSelect, // 对应下方 CSS
-
+        'hide-speed': !c.showSpeed,
+        'hide-code-select': !c.showCodeSelect,
         'hide-btn-play': !c.showPlay,
         'hide-btn-audio': !c.showAudio,
         'hide-btn-stretch': !c.showStretch,
@@ -113,25 +110,35 @@ export default {
     initialPlayUrl: {
       handler(newUrl) {
         const url = typeof newUrl === 'string' ? newUrl : (newUrl && newUrl.videoUrl) || '';
+
         if (url) {
+          // 有地址：准备播放
           this.isLoading = true;
           this.isError = false;
-          this.$nextTick(() => {
-            if (this.playerInstance) this.destroy();
-            setTimeout(() => {
+
+          if (this.playerInstance) {
+            // 实例已存在（比如轮播切换下一路），直接切换地址，不要销毁
+            this.play(url);
+          } else {
+            // 实例不存在（比如从全部关闭状态恢复），创建并播放
+            this.$nextTick(() => {
               this.create();
-              this.play(url);
-            }, 50);
-          });
+              setTimeout(() => this.play(url), 100);
+            });
+          }
         } else {
+          // 地址为空（全部关闭）：彻底销毁
           this.destroy();
           this.isLoading = false;
+          this.isError = false;
         }
       },
       immediate: true
     },
     hasAudio() {
-      if (this.hasUrl) this.destroyAndReplay(this.initialPlayUrl);
+      if (this.hasUrl && this.playerInstance) {
+        this.destroyAndReplay(this.initialPlayUrl);
+      }
     }
   },
   beforeDestroy() {
@@ -156,16 +163,20 @@ export default {
     create() {
       if (this.playerInstance) return;
-      const container = this.$refs.container;
-      if (!container) return;
-      container.innerHTML = '';
-      if (container.clientWidth === 0 && this.retryCount < 5) {
-        this.retryCount++;
-        setTimeout(() => this.create(), 200);
+      const container = this.$refs.container;
+      // 容错：如果容器不存在，或者刚才被销毁还没渲染出来，延迟重试
+      if (!container || container.clientWidth === 0) {
+        if (this.retryCount < 10) { // 增加重试次数
+          this.retryCount++;
+          setTimeout(() => this.create(), 100);
+        }
         return;
       }
+      // 再次确保清空内容
+      container.innerHTML = '';
+
       if (!window.EasyPlayerPro) return;
       try {
@@ -178,10 +189,8 @@ export default {
           WCS: true,
           hasAudio: this.hasAudio,
           isLive: true,
-          loading: false,
-          isBand: true, // 保持开启以获取数据
-
-          // btns 配置只能控制原生有开关的按钮
+          loading: false, // 使用我们的自定义 loading
+          isBand: true,
           btns: {
             play: c.showPlay,
             audio: c.showAudio,
@@ -200,9 +209,11 @@ export default {
         });
         this.playerInstance.on('play', () => {
+          console.log(`[${this.uniqueId}] 播放成功`);
           this.hasStarted = true;
           this.isLoading = false;
           this.isError = false;
+          // 播放成功后显示一下控制栏
           this.showControls = true;
           if (this.controlTimer) clearTimeout(this.controlTimer);
           this.controlTimer = setTimeout(() => {
@@ -212,61 +223,73 @@ export default {
         this.playerInstance.on('error', (err) => {
           console.error('Player Error:', err);
-          this.triggerError('流媒体连接失败');
+          this.triggerError('视频流连接异常');
         });
       } catch (e) {
-        console.error("Create Error:", e);
+        console.error("Create Instance Error:", e);
+        // 如果创建报错，可能是容器脏了，执行销毁逻辑刷新DOM
+        this.destroy();
       }
     },
     play(url) {
       if (!url) return;
+
       if (!this.playerInstance) {
         this.create();
         setTimeout(() => this.play(url), 200);
         return;
       }
+
       this.isLoading = true;
       this.isError = false;
       this.errorMessage = '';
+      // 设置超时检测
       setTimeout(() => {
         if (this.isLoading) this.triggerError('连接超时，请重试');
       }, this.loadTimeout);
       this.playerInstance.play(url).catch(e => {
+        console.warn("Play error:", e);
         this.triggerError('请求播放失败');
       });
     },
+    // 【核心修复】彻底销毁并刷新DOM ID
     destroy() {
+      // 1. 重置状态
       this.hasStarted = false;
       this.showControls = false;
       this.netSpeed = '0KB/s';
+      this.isLoading = false;
+      this.isError = false;
+
       const container = this.$refs.container;
-      if (container) {
-        const video = container.querySelector('video');
-        if (video) {
-          video.pause();
-          video.src = "";
-          video.load();
-          video.remove();
-        }
-        container.innerHTML = '';
-      }
+
+      // 2. 销毁实例
       if (this.playerInstance) {
         try {
           this.playerInstance.destroy();
-        } catch (e) {
-        }
+        } catch(e) {}
         this.playerInstance = null;
       }
+
+      // 3. 暴力清理旧 DOM
+      if (container) {
+        container.innerHTML = '';
+      }
+
+      // 4. 【关键】更新 uniqueId
+      // 这会强制 Vue 在下一次渲染时移除当前的 div，并创建一个全新的 div
+      // 从而彻底解决 "EasyPlayerPro err container" 错误
+      this.uniqueId = `player-box-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
     },
     destroyAndReplay(url) {
-      this.isLoading = true;
       this.destroy();
+      this.isLoading = true;
       this.$nextTick(() => {
         this.create();
         if (url) {
@@ -289,276 +312,93 @@ export default {
     },
     setControls(config) {
-      this.controlsConfig = {...this.controlsConfig, ...config};
+      this.controlsConfig = { ...this.controlsConfig, ...config };
     }
   }
 };
 </script>
 <style scoped>
-/* --------------------------------------------------
-  这里是组件内部样式，仅处理非 EasyPlayer 插件的部分
-  --------------------------------------------------
-*/
+/* 基础布局 */
 .player-wrapper {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  background: #000;
-  overflow: hidden;
+  width: 100%; height: 100%; display: flex; flex-direction: column;
+  position: relative; background: #000; overflow: hidden;
 }
-
 .player-box {
-  flex: 1;
-  width: 100%;
-  height: 100%;
-  background: #000;
-  position: relative;
-  z-index: 1;
+  flex: 1; width: 100%; height: 100%; background: #000; position: relative; z-index: 1;
 }
 /* 顶部栏 */
 .custom-top-bar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 40px;
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
-  z-index: 200;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 15px;
-  box-sizing: border-box;
-  pointer-events: none;
-  transition: opacity 0.3s ease;
-}
-
-.custom-top-bar.hide-bar {
-  opacity: 0;
-}
-
-.top-bar-left .video-title {
-  color: #fff;
-  font-size: 14px;
-  font-weight: bold;
-}
-
-.top-bar-right .net-speed {
-  color: #00ff00;
-  font-size: 12px;
-  font-family: monospace;
-}
-
-/* 蒙层 */
-.status-mask {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: #000;
-  z-index: 50;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
+  position: absolute; top: 0; left: 0; width: 100%; height: 40px;
+  background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0));
+  z-index: 200; display: flex; justify-content: space-between; align-items: center;
+  padding: 0 15px; box-sizing: border-box; pointer-events: none; transition: opacity 0.3s ease;
+}
+.custom-top-bar.hide-bar { opacity: 0; }
+.top-bar-left .video-title { color: #fff; font-size: 14px; font-weight: bold; }
+.top-bar-right .net-speed { color: #00ff00; font-size: 12px; font-family: monospace; }
+
+/* 无信号遮罩
+   z-index 必须高于 player-box (z-index 1)
+   并且背景设为纯黑，以盖住可能残留的画面
+*/
 .idle-mask {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: #000;
-  z-index: 15;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.idle-text {
-  color: #555;
-  font-size: 14px;
-}
-
-.status-text {
-  color: #fff;
-  margin-top: 15px;
-  font-size: 14px;
-  letter-spacing: 1px;
+  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+  background-color: #000; z-index: 10;
+  display: flex; align-items: center; justify-content: center;
 }
+.idle-text { color: #555; font-size: 14px; }
-.error-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.error-text {
-  color: #ff6d6d;
-}
-
-/* Loading 动画 */
-.spinner-box {
-  width: 50px;
-  height: 50px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+/* 状态蒙层 */
+.status-mask {
+  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+  background-color: #000; z-index: 50;
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
 }
+.status-text { color: #fff; margin-top: 15px; font-size: 14px; letter-spacing: 1px; }
+.error-content { display: flex; flex-direction: column; align-items: center; justify-content: center; }
+.error-text { color: #ff6d6d; }
+/* Loading */
+.spinner-box { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; }
 .simple-spinner {
-  width: 40px;
-  height: 40px;
-  border: 3px solid rgba(255, 255, 255, 0.2);
-  border-radius: 50%;
-  border-top-color: #409EFF;
-  animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
+  width: 40px; height: 40px; border: 3px solid rgba(255, 255, 255, 0.2);
+  border-radius: 50%; border-top-color: #409EFF; animation: spin 0.8s linear infinite;
 }
+@keyframes spin { to { transform: rotate(360deg); } }
 </style>
 <style>
-/* 1. 控制网速显示显隐 */
-.player-wrapper.hide-speed .easyplayer-speed {
-  display: none !important;
-}
-
-/* 2. 控制解码面板显隐 */
-.player-wrapper.hide-code-select .easyplayer-controls-code-wrap {
-  display: none !important;
-}
-
-/* 3. 控制其他按钮显隐 (基于您提供的 controlsConfig) */
-.player-wrapper.hide-bottom-bar .easyplayer-controls {
-  display: none !important;
-}
-
-/* 播放按钮 */
-.player-wrapper.hide-btn-play .easyplayer-play,
-.player-wrapper.hide-btn-play .easyplayer-pause {
-  display: none !important;
-}
-
-/* 音量按钮 */
-.player-wrapper.hide-btn-audio .easyplayer-audio-box {
-  display: none !important;
-}
-
-/* 截图按钮 */
-.player-wrapper.hide-btn-screenshot .easyplayer-screenshot {
-  display: none !important;
-}
-
-/* 全屏按钮 */
-.player-wrapper.hide-btn-fullscreen .easyplayer-fullscreen,
-.player-wrapper.hide-btn-fullscreen .easyplayer-fullscreen-exit {
-  display: none !important;
-}
-
-
-/* --- 修正录制按钮样式 (强制应用) --- */
-.player-wrapper.hide-btn-record .easyplayer-record,
-.player-wrapper.hide-btn-record .easyplayer-record-stop {
-  display: none !important;
-}
-
-/* 强制覆盖录制按钮位置 */
+.player-wrapper.hide-speed .easyplayer-speed { display: none !important; }
+.player-wrapper.hide-code-select .easyplayer-controls-code-wrap { display: none !important; }
+.player-wrapper.hide-bottom-bar .easyplayer-controls { display: none !important; }
+.player-wrapper.hide-btn-play .easyplayer-play, .player-wrapper.hide-btn-play .easyplayer-pause { display: none !important; }
+.player-wrapper.hide-btn-audio .easyplayer-audio-box { display: none !important; }
+.player-wrapper.hide-btn-screenshot .easyplayer-screenshot { display: none !important; }
+.player-wrapper.hide-btn-fullscreen .easyplayer-fullscreen, .player-wrapper.hide-btn-fullscreen .easyplayer-fullscreen-exit { display: none !important; }
+.player-wrapper.hide-btn-record .easyplayer-record, .player-wrapper.hide-btn-record .easyplayer-record-stop { display: none !important; }
 .player-wrapper .easyplayer-recording {
-  display: none;
-  position: absolute !important;
-  top: 50px !important;
-  left: 50% !important;
-  transform: translateX(-50%) !important;
-  z-index: 200 !important;
-  background: rgba(255, 0, 0, 0.6);
-  border-radius: 4px;
-  padding: 4px 12px;
-}
-
-.player-wrapper .easyplayer-recording[style*="block"] {
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-}
-
-.player-wrapper .easyplayer-recording-time {
-  margin: 0 8px;
-  font-size: 14px;
-  color: #fff;
-}
-
-.player-wrapper .easyplayer-recording-stop {
-  height: auto !important;
-  cursor: pointer;
-}
-
-
-/* --- 修正拉伸按钮样式 (SVG图标) --- */
-.player-wrapper.hide-btn-stretch .easyplayer-stretch {
-  display: none !important;
-}
-
-.player-wrapper .easyplayer-stretch {
-  font-size: 0 !important;
-  width: 34px !important;
-  height: 100% !important;
-  display: flex !important;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-
+  display: none; position: absolute !important; top: 50px !important; left: 50% !important;
+  transform: translateX(-50%) !important; z-index: 200 !important;
+  background: rgba(255, 0, 0, 0.6); border-radius: 4px; padding: 4px 12px;
+}
+.player-wrapper .easyplayer-recording[style*="block"] { display: flex !important; align-items: center !important; justify-content: center !important; }
+.player-wrapper .easyplayer-recording-time { margin: 0 8px; font-size: 14px; color: #fff; }
+.player-wrapper .easyplayer-recording-stop { height: auto !important; cursor: pointer; }
+.player-wrapper.hide-btn-stretch .easyplayer-stretch { display: none !important; }
+.player-wrapper .easyplayer-stretch { font-size: 0 !important; width: 34px !important; height: 100% !important; display: flex !important; align-items: center; justify-content: center; cursor: pointer; }
 .player-wrapper .easyplayer-stretch::after {
-  content: '';
-  display: block;
-  width: 20px;
-  height: 20px;
+  content: ''; display: block; width: 20px; height: 20px;
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M128 128h298.667v85.333H195.2l201.6 201.6-60.373 60.374-201.6-201.6v231.466H49.067V49.067h78.933V128zM896 896H597.333v-85.333H828.8l-201.6-201.6 60.373-60.374 201.6 201.6V518.933h85.334v377.067h-78.934V896z' fill='%23ffffff'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
-  opacity: 0.8;
-}
-
-.player-wrapper .easyplayer-stretch:hover::after {
-  opacity: 1;
+  background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.8;
 }
-
-
-/* --- 修正电子放大样式 --- */
-.player-wrapper.hide-btn-zoom .easyplayer-zoom,
-.player-wrapper.hide-btn-zoom .easyplayer-zoom-stop {
-  display: none !important;
-}
-
+.player-wrapper .easyplayer-stretch:hover::after { opacity: 1; }
+.player-wrapper.hide-btn-zoom .easyplayer-zoom, .player-wrapper.hide-btn-zoom .easyplayer-zoom-stop { display: none !important; }
 .player-wrapper .easyplayer-zoom-controls {
-  position: absolute !important;
-  top: 50px !important;
-  left: 50% !important;
-  transform: translateX(-50%);
-  z-index: 199 !important;
-  background: rgba(0, 0, 0, 0.6);
-  border-radius: 20px;
-  padding: 0 10px;
-}
-
-
-/* --- 整体显隐控制 --- */
-.player-wrapper.force-hide-controls .easyplayer-controls {
-  opacity: 0 !important;
-  visibility: hidden !important;
-  transition: opacity 0.3s ease;
+  position: absolute !important; top: 50px !important; left: 50% !important;
+  transform: translateX(-50%); z-index: 199 !important;
+  background: rgba(0,0,0,0.6); border-radius: 20px; padding: 0 10px;
 }
+.player-wrapper.force-hide-controls .easyplayer-controls { opacity: 0 !important; visibility: hidden !important; transition: opacity 0.3s ease; }
 </style>