Merge branch 'master' of http://59.110.91.129:3000/zhangmengying/AIClass into wanzi

src/components/videopage/VideoPlayer.vue

@@ -155,7 +155,7 @@ const handleLoadedMetadata = () => {
 const seekToTime = (time) => {
   if (videoRef.value) {
     videoRef.value.currentTime = time
-    // 清除已暂停索引，确保用户点击后可以再次触发暂停
+    // 清除暂停索引，用户点击后可以再次触发暂停
     pausedIndices.value = pausedIndices.value.filter(t => t !== time)
   }
 }
@@ -198,7 +198,6 @@ const handleTimeUpdate = ev => {
     let time = courseCofig.ccTime
     // 检查是否到达时间点且还未暂停过
     if (currentTime === time && !pausedIndices.value.includes(time)) {
-      // 无论 ccQuestSource 是什么值，都暂停视频
       videoRef.value.pause()
       // 记录暂停时间
       pausedIndices.value.push(currentTime)
@@ -221,7 +220,7 @@ const handleSeeked = () => {
   pausedIndices.value = []
 }
 
-// 添加视频结束事件处理
+// 视频结束事件处理
 const handleVideoEnded = () => {
   // 视频结束时保存100%进度
   if (!savedProgress.value.includes(100)) {
@@ -322,46 +321,6 @@ 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播放
@@ -394,6 +353,32 @@ 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存在
@@ -426,27 +411,38 @@ 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);
-  // 为视频元素添加键盘事件监听器
-  addVideoKeyboardListener();
+
 })
 // 组件卸载时
 onBeforeUnmount(() => {
@@ -454,10 +450,24 @@ onBeforeUnmount(() => {
     hlsRef.value.destroy()
     hlsRef.value = null
   }
-  // 移除键盘事件监听
-  document.removeEventListener('keydown', handleKeyPress);
-  // 移除视频元素的键盘事件监听器
+  // 移除视频元素的事件监听器
   removeVideoKeyboardListener();
+
+  // 确保退出网页全屏
+  if (isWebFullscreen.value) {
+    const videoWrapper = document.querySelector('.video-wrapper')
+    if (videoWrapper) {
+      videoWrapper.style.position = ''
+      videoWrapper.style.top = ''
+      videoWrapper.style.left = ''
+      videoWrapper.style.width = '70%'
+      videoWrapper.style.height = '100%'
+      videoWrapper.style.zIndex = ''
+      videoWrapper.style.backgroundColor = ''
+    }
+  }
+
+
 })
 
 // 监听contentType和videoPath变化
@@ -524,33 +534,6 @@ const toggleWebFullscreen = () => {
   }
 }
 
-// 组件卸载时
-onBeforeUnmount(() => {
-  if (hlsRef.value) {
-    hlsRef.value.destroy()
-    hlsRef.value = null
-  }
-
-  // 确保退出网页全屏
-  if (isWebFullscreen.value) {
-    const videoWrapper = document.querySelector('.video-wrapper')
-    if (videoWrapper) {
-      videoWrapper.style.position = ''
-      videoWrapper.style.top = ''
-      videoWrapper.style.left = ''
-      videoWrapper.style.width = '70%'
-      videoWrapper.style.height = '100%'
-      videoWrapper.style.zIndex = ''
-      videoWrapper.style.backgroundColor = ''
-    }
-  }
-
-  // 移除键盘事件监听
-  document.removeEventListener('keydown', handleKeyPress);
-  // 移除视频元素的键盘事件监听器
-  removeVideoKeyboardListener();
-})
-
 </script>
 
 <style scoped lang="scss">
@@ -749,4 +732,18 @@ video::-webkit-media-controls-panel:not([hidden]) ~ .progress-markers {
 .history-tip:hover {
   background-color: rgba(0, 0, 0, 0.6);
 }
-</style>
+
+/* 调整视频控件样式以适应我们的自定义标记 */
+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>