Merge remote-tracking branch 'origin/wanzi'

src/components/videopage/VideoPlayer.vue

@@ -15,6 +15,7 @@
             @loadedmetadata="handleLoadedMetadata"
             @pause="handleVideoPause"
             @play="handleVideoPlay"
+            @click="handleVideoClick"
           ></video>
           <!-- 历史播放位置提示 -->
           <div 
@@ -166,7 +167,7 @@ const handleLoadedMetadata = () => {
 const seekToTime = (time) => {
   if (videoRef.value) {
     videoRef.value.currentTime = time
-    // 清除已暂停索引，确保用户点击后可以再次触发暂停
+    // 清除暂停索引，用户点击后可以再次触发暂停
     pausedIndices.value = pausedIndices.value.filter(t => t !== time)
   }
 }
@@ -209,7 +210,6 @@ const handleTimeUpdate = ev => {
     let time = courseCofig.ccTime
     // 检查是否到达时间点且还未暂停过
     if (currentTime === time && !pausedIndices.value.includes(time)) {
-      // 无论 ccQuestSource 是什么值，都暂停视频
       videoRef.value.pause()
       // 记录暂停时间
       pausedIndices.value.push(currentTime)
@@ -232,7 +232,7 @@ const handleSeeked = () => {
   pausedIndices.value = []
 }
 
-// 添加视频结束事件处理
+// 视频结束事件处理
 const handleVideoEnded = () => {
   // 视频结束时保存100%进度
   if (!savedProgress.value.includes(100)) {
@@ -303,6 +303,17 @@ const handleVideoPlay = () => {
   isVideoPaused.value = false
 }
 
+// 处理视频点击事件
+const handleVideoClick = () => {
+  if (videoRef.value) {
+    if (videoRef.value.paused) {
+      videoRef.value.play();
+    } else {
+      videoRef.value.pause();
+    }
+  }
+}
+
 // 初始化视频播放器
 const initVideoPlayer = () => {
   if (props.contentType !== 'video') return
@@ -319,6 +330,9 @@ const initVideoPlayer = () => {
       hlsRef.value = null
     }
 
+    // 为视频元素添加键盘事件监听器
+    addVideoKeyboardListener();
+
     // 检查视频路径是否是m3u8格式
     if (props.videoPath && props.videoPath.toLowerCase().endsWith('.m3u8')) {
       // 使用HLS播放
@@ -382,11 +396,27 @@ const handleKeyPress = (event) => {
     }
   }
 }
+
+// 为视频元素添加键盘事件监听器
+const addVideoKeyboardListener = () => {
+  if (videoRef.value) {
+    videoRef.value.addEventListener('keydown', handleKeyPress);
+  }
+}
+
+// 移除视频元素的键盘事件监听器
+const removeVideoKeyboardListener = () => {
+  if (videoRef.value) {
+    videoRef.value.removeEventListener('keydown', handleKeyPress);
+  }
+}
 // 组件挂载时
 onMounted(() => {
   initVideoPlayer()
  // 键盘事件监听
   document.addEventListener('keydown', handleKeyPress);
+  // 为视频元素添加键盘事件监听器
+  addVideoKeyboardListener();
 })
 // 组件卸载时
 onBeforeUnmount(() => {
@@ -396,6 +426,8 @@ onBeforeUnmount(() => {
   }
   // 移除键盘事件监听
   document.removeEventListener('keydown', handleKeyPress);
+  // 移除视频元素的键盘事件监听器
+  removeVideoKeyboardListener();
 })
 
 // 监听contentType和videoPath变化
@@ -478,6 +510,11 @@ onBeforeUnmount(() => {
       videoWrapper.style.backgroundColor = ''
     }
   }
+  
+  // 移除键盘事件监听
+  document.removeEventListener('keydown', handleKeyPress);
+  // 移除视频元素的键盘事件监听器
+  removeVideoKeyboardListener();
 })
 
 </script>