Ver Fonte

视频中加入键盘空格控件

丸子 há 8 meses atrás
pai
commit
755ee9fa43
2 ficheiros alterados com 24 adições e 3 exclusões
  1. 23 2
      src/components/videopage/VideoPlayer.vue
  2. 1 1
      src/views/AIDevelop.vue

+ 23 - 2
src/components/videopage/VideoPlayer.vue

@@ -250,11 +250,32 @@ const tryPlayVideo = () => {
   }, 1000)
 }
 
-
-
+// 处理空格键控制播放/暂停
+const handleKeyPress = (event) => {
+  // 检查是否是空格键且视频元素存在
+  if (event.code === 'Space' && videoRef.value) {
+    event.preventDefault(); // 防止空格键默认行为(如页面滚动)
+    if (videoRef.value.paused) {
+      videoRef.value.play();
+    } else {
+      videoRef.value.pause();
+    }
+  }
+}
 // 组件挂载时
 onMounted(() => {
   initVideoPlayer()
+ // 键盘事件监听
+  document.addEventListener('keydown', handleKeyPress);
+})
+// 组件卸载时
+onBeforeUnmount(() => {
+  if (hlsRef.value) {
+    hlsRef.value.destroy()
+    hlsRef.value = null
+  }
+  // 移除键盘事件监听
+  document.removeEventListener('keydown', handleKeyPress);
 })
 
 // 监听contentType和videoPath变化

+ 1 - 1
src/views/AIDevelop.vue

@@ -51,7 +51,7 @@
                   <el-menu-item-group v-if="item.children">
                     <template v-for="child in item.children" :key="child.key">
                       <el-menu-item :index="child.key"
-                        >• {{ child.title }}</el-menu-item
+                        >•{{ child.title }}</el-menu-item
                       >
                     </template>
                   </el-menu-item-group>