回滚：初始自定义全屏方法

src/components/videopage/VideoPlayer.vue

@@ -8,6 +8,7 @@
               class="full-box-video"
               ref="videoRef"
               :controls="true"
+              :controlsList="'nofullscreen'"
               @timeupdate="handleTimeUpdate"
               @seeked="handleSeeked"
               @ended="handleVideoEnded"
@@ -35,6 +36,17 @@
                 @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>
@@ -155,7 +167,7 @@ const handleLoadedMetadata = () => {
 const seekToTime = (time) => {
   if (videoRef.value) {
     videoRef.value.currentTime = time
-    // 清除暂停索引，用户点击后可以再次触发暂停
+    // 清除已暂停索引，确保用户点击后可以再次触发暂停
     pausedIndices.value = pausedIndices.value.filter(t => t !== time)
   }
 }
@@ -198,6 +210,7 @@ const handleTimeUpdate = ev => {
     let time = courseCofig.ccTime
     // 检查是否到达时间点且还未暂停过
     if (currentTime === time && !pausedIndices.value.includes(time)) {
+      // 无论 ccQuestSource 是什么值，都暂停视频
       videoRef.value.pause()
       // 记录暂停时间
       pausedIndices.value.push(currentTime)
@@ -220,7 +233,7 @@ const handleSeeked = () => {
   pausedIndices.value = []
 }
 
-// 视频结束事件处理
+// 添加视频结束事件处理
 const handleVideoEnded = () => {
   // 视频结束时保存100%进度
   if (!savedProgress.value.includes(100)) {
@@ -353,32 +366,6 @@ const initVideoPlayer = () => {
   })
 }
 
-// 监听全屏状态变化事件
-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();
-  }
-};
-
 // 尝试播放视频，处理浏览器自动播放限制
 const tryPlayVideo = () => {
   // 确保videoRef存在
@@ -411,38 +398,25 @@ const handleKeyPress = (event) => {
   }
 }
 
-// 为视频元素添加事件监听器
+// 为视频元素添加键盘事件监听器
 const addVideoKeyboardListener = () => {
   if (videoRef.value) {
-    //键盘事件监听
     videoRef.value.addEventListener('keydown', handleKeyPress);
-
-    // 添加全屏状态变化事件监听
-    videoRef.value.addEventListener('fullscreenchange', handleFullscreenChange);
-    videoRef.value.addEventListener('webkitfullscreenchange', handleFullscreenChange);
-    videoRef.value.addEventListener('mozfullscreenchange', handleFullscreenChange);
-    videoRef.value.addEventListener('MSFullscreenChange', handleFullscreenChange);
   }
 }
 
 // 移除视频元素的键盘事件监听器
 const removeVideoKeyboardListener = () => {
   if (videoRef.value) {
-    // 移除键盘事件监听
     videoRef.value.removeEventListener('keydown', handleKeyPress);
-
-    // 移除全屏状态变化事件监听
-    videoRef.value.removeEventListener('fullscreenchange', handleFullscreenChange);
-    videoRef.value.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
-    videoRef.value.removeEventListener('mozfullscreenchange', handleFullscreenChange);
-    document.removeEventListener('MSFullscreenChange', handleFullscreenChange);
   }
 }
 
 // 组件挂载时
 onMounted(() => {
   initVideoPlayer()
-
+  // 键盘事件监听
+  document.addEventListener('keydown', handleKeyPress);
 })
 // 组件卸载时
 onBeforeUnmount(() => {
@@ -450,9 +424,6 @@ onBeforeUnmount(() => {
     hlsRef.value.destroy()
     hlsRef.value = null
   }
-  // 移除视频元素的事件监听器
-  removeVideoKeyboardListener();
-
   // 确保退出网页全屏
   if (isWebFullscreen.value) {
     const videoWrapper = document.querySelector('.video-wrapper')
@@ -466,8 +437,10 @@ onBeforeUnmount(() => {
       videoWrapper.style.backgroundColor = ''
     }
   }
-
-
+  // 移除键盘事件监听
+  document.removeEventListener('keydown', handleKeyPress);
+  // 移除视频元素的键盘事件监听器
+  removeVideoKeyboardListener();
 })
 
 // 监听contentType和videoPath变化
@@ -502,7 +475,6 @@ const toggleWebFullscreen = () => {
       video.style.width = '100%'
       video.style.height = '100%'
       video.style.objectFit = 'contain'
-      video.focus();
     }
 
     isWebFullscreen.value = true
@@ -525,7 +497,6 @@ const toggleWebFullscreen = () => {
       video.style.width = '100%'
       video.style.height = '100%'
       video.style.objectFit = 'cover'
-      video.focus();
     }
 
     isWebFullscreen.value = false
@@ -731,6 +702,28 @@ video::-webkit-media-controls-panel:not([hidden]) ~ .progress-markers {
   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;
@@ -744,4 +737,5 @@ video::-webkit-media-controls-panel {
   width: calc(100% + 30px); /* 扩展控件面板宽度，确保与自定义标记对齐 */
   background: transparent !important; /* 去掉背景渐变，设为透明 */
 }
-</style>
+
+</style>