解决监控视频全屏组件调用自定义全屏

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>
@@ -305,7 +293,12 @@ const handleVideoPlay = () => {
 }
 
 // 处理视频点击事件
-const handleVideoClick = () => {
+const handleVideoClick = (event) => {
+  // 阻止浏览器默认的视频点击行为
+  event.preventDefault();
+  // 阻止事件冒泡，防止其他元素的点击事件影响
+  event.stopPropagation();
+  
   if (videoRef.value) {
     if (videoRef.value.paused) {
       videoRef.value.play();
@@ -412,11 +405,49 @@ const removeVideoKeyboardListener = () => {
   }
 }
 
+// 处理视频全屏变化事件
+const handleFullscreenChange = () => {
+  // 检查是否是浏览器默认的全屏模式
+  const isFullscreen = !!(document.fullscreenElement || 
+                           document.webkitFullscreenElement || 
+                           document.mozFullScreenElement || 
+                           document.msFullscreenElement);
+  
+  if (isFullscreen) {
+    // 如果是视频元素触发的全屏，退出默认全屏并调用自定义全屏
+    const fullscreenElement = document.fullscreenElement || 
+                              document.webkitFullscreenElement || 
+                              document.mozFullScreenElement || 
+                              document.msFullscreenElement;
+    
+    if (fullscreenElement === videoRef.value) {
+      // 退出浏览器默认全屏
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      }
+      
+      // 调用自定义全屏方法
+      toggleWebFullscreen();
+    }
+  }
+}
+
 // 组件挂载时
 onMounted(() => {
   initVideoPlayer()
   // 键盘事件监听
   document.addEventListener('keydown', handleKeyPress);
+  // 添加全屏事件监听
+  document.addEventListener('fullscreenchange', handleFullscreenChange);
+  document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+  document.addEventListener('mozfullscreenchange', handleFullscreenChange);
+  document.addEventListener('MSFullscreenChange', handleFullscreenChange);
 })
 // 组件卸载时
 onBeforeUnmount(() => {
@@ -441,6 +472,11 @@ onBeforeUnmount(() => {
   document.removeEventListener('keydown', handleKeyPress);
   // 移除视频元素的键盘事件监听器
   removeVideoKeyboardListener();
+  // 移除全屏事件监听
+    document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
+    document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
+    document.removeEventListener('MSFullscreenChange', handleFullscreenChange);
 })
 
 // 监听contentType和videoPath变化
@@ -475,6 +511,7 @@ const toggleWebFullscreen = () => {
       video.style.width = '100%'
       video.style.height = '100%'
       video.style.objectFit = 'contain'
+      video.focus();
     }
 
     isWebFullscreen.value = true
@@ -497,6 +534,7 @@ const toggleWebFullscreen = () => {
       video.style.width = '100%'
       video.style.height = '100%'
       video.style.objectFit = 'cover'
+      video.focus();
     }
 
     isWebFullscreen.value = false
@@ -738,4 +776,4 @@ video::-webkit-media-controls-panel {
   background: transparent !important; /* 去掉背景渐变，设为透明 */
 }
 
-</style>
+</style>