Quellcode durchsuchen

1、恢复:优化全屏方法监控更改自定义到浏览器全屏,处理弹框事项显示
2、修改灯光间隔失时效

liyanbo vor 3 Monaten
Ursprung
Commit
c724ad5b48
2 geänderte Dateien mit 41 neuen und 50 gelöschten Zeilen
  1. 1 1
      src/components/blockly/MapGame.vue
  2. 40 49
      src/components/videopage/VideoPlayer.vue

+ 1 - 1
src/components/blockly/MapGame.vue

@@ -267,7 +267,7 @@ const CONFIG = {
     PLAYER_FADE_DURATION: 500, // 玩家淡入淡出持续时间
     TEMP_ITEM_FADE_DURATION: 500, // 临时物品淡入淡出持续时间
     COMPLETION_DISPLAY: 1000, // 任务完成后显示延迟时间
-    LIGHT_DURATION: 2000,    // 灯光效果持续时间
+    LIGHT_DURATION: 1000,    // 灯光效果持续时间
     BLINK_INTERVAL: 500,    // 灯光闪烁间隔时间
   },
   // 游戏配置

+ 40 - 49
src/components/videopage/VideoPlayer.vue

@@ -8,7 +8,6 @@
               class="full-box-video"
               ref="videoRef"
               :controls="true"
-              :controlsList="'nofullscreen'"
               @timeupdate="handleTimeUpdate"
               @seeked="handleSeeked"
               @ended="handleVideoEnded"
@@ -36,17 +35,6 @@
                 @click="seekToTime(marker.time)"
             ></div>
           </div>
-          <!-- 网页全屏按钮 -->
-          <el-tooltip
-              :content="isWebFullscreen ? '退出网页全屏' : '进入网页全屏'"
-              placement="left"
-              effect="dark"
-          >
-            <div class="fullscreen-btn" @click="toggleWebFullscreen">
-              <el-icon v-if="!isWebFullscreen"><FullScreen /></el-icon>
-              <el-icon v-else><Close /></el-icon>
-            </div>
-          </el-tooltip>
         </div>
       </template>
     </div>
@@ -334,6 +322,46 @@ const initVideoPlayer = () => {
     // 为视频元素添加键盘事件监听器
     addVideoKeyboardListener();
 
+    // 监听全屏状态变化事件
+    const handleFullscreenChange = () => {
+      // 检查是否处于全屏状态
+      const isFullscreen = !!(document.fullscreenElement ||
+          document.webkitFullscreenElement ||
+          document.mozFullScreenElement ||
+          document.msFullscreenElement);
+
+      // 如果正在进入全屏状态,退出默认全屏并调用自定义方法
+      if (isFullscreen) {
+        // 退出默认全屏
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen();
+        }
+
+        // 调用自定义的网页全屏方法
+        toggleWebFullscreen();
+      }
+    };
+
+    // 添加全屏状态变化事件监听
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+    document.addEventListener('mozfullscreenchange', handleFullscreenChange);
+    document.addEventListener('MSFullscreenChange', handleFullscreenChange);
+
+    // 组件卸载时移除事件监听
+    onBeforeUnmount(() => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+      document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
+      document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
+      document.removeEventListener('MSFullscreenChange', handleFullscreenChange);
+    });
+
     // 检查视频路径是否是m3u8格式
     if (props.videoPath && props.videoPath.toLowerCase().endsWith('.m3u8')) {
       // 使用HLS播放
@@ -717,41 +745,4 @@ video::-webkit-media-controls-panel:not([hidden]) ~ .progress-markers {
 .history-tip:hover {
   background-color: rgba(0, 0, 0, 0.6);
 }
-
-/* 网页全屏按钮样式 */
-.fullscreen-btn {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  width: 30px;
-  height: 30px;
-  background-color: rgba(0, 0, 0, 0.5);
-  color: white;
-  border-radius: 4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  z-index: 15;
-  transition: all 0.3s ease;
-}
-
-.fullscreen-btn:hover {
-  background-color: rgba(0, 0, 0, 0.7);
-}
-
-/* 调整视频控件样式以适应我们的自定义标记 */
-video::-webkit-media-controls-timeline {
-  margin-bottom: 10px;
-}
-
-video::-webkit-media-controls {
-  overflow: visible !important;
-}
-
-video::-webkit-media-controls-panel {
-  width: calc(100% + 30px); /* 扩展控件面板宽度,确保与自定义标记对齐 */
-  background: transparent !important; /* 去掉背景渐变,设为透明 */
-}
-
 </style>